/* =========================================================================
   ТОКЕНЫ — направление 02 «Типографская»
   ========================================================================= */
:root{
  --font:"Montserrat","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;

  --ground:#FFFFFF;
  --ground-alt:#F7F6FA;
  --ink:#14121C;
  --ink-2:#56526A;
  --ink-3:#8B8699;
  --line:#DCD8E6;

  --violet:#6B4BE8;
  --violet-soft:#F1EDFF;
  --pink:#FF2B6B;

  --night:#0B0813;
  --night-2:#15101F;
  --night-3:#1E1830;
  --night-ink:#F2EFFA;
  --night-ink-2:#A79FC4;
  --night-line:#2A2340;
  --violet-lift:#9B7BFF;

  /* Градиент — только линия-разделитель, наведение на целевую кнопку, логотип */
  --grad:linear-gradient(92deg,#6B4BE8,#FF2B6B);

  --r:2px;
  --pad:clamp(20px,4vw,56px);
  --max:1480px;
}

/* =========================================================================
   СБРОС
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,hr,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
ul,ol{list-style:none;padding:0}
img,picture,svg,video{max-width:100%;display:block}
input,button,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{font-family:var(--font);background:var(--ground);color:var(--ink);
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:var(--r)}
.sec--night a:focus-visible,.sec--night button:focus-visible,
.page-hero--night a:focus-visible,.page-hero--night button:focus-visible,
.form-sec input:focus-visible,.form-sec textarea:focus-visible{outline-color:var(--violet-lift)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* =========================================================================
   РАСКЛАДКА
   ========================================================================= */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(44px,7vw,88px)}
.sec--alt{background:var(--ground-alt)}
.sec--night{background:var(--night);color:var(--night-ink)}

.sec__head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(26px,4vw,44px)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.sec--night .eyebrow{color:var(--violet-lift)}
h2{font-size:clamp(23px,3vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.08;max-width:20ch;text-wrap:balance}
.sec__sub{font-size:15.5px;color:var(--ink-2);max-width:58ch}
.sec--night .sec__sub{color:var(--night-ink-2)}
.sec__more{margin-top:clamp(24px,3vw,34px)}

.rule{height:3px;background:var(--grad);border:0}

/* =========================================================================
   ШАПКА
   ========================================================================= */
.site-header{border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:50}
/* Одна строка и только одна: перенос ронял блок с телефоном под логотип */
.site-header__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding-block:14px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo svg{width:42px;height:26px;flex-shrink:0}
.logo__t{font-size:12px;line-height:1.35;color:var(--ink-2)}
.logo__t b{display:block;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}

.nav{margin-left:auto;font-size:14.5px;font-weight:500}
.nav__list{display:flex;gap:clamp(8px,1.25vw,18px);align-items:center;white-space:nowrap}
.nav__item{position:relative}
.nav__item > a,.nav__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 0;
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .15s}
.nav__item > a:hover,.nav__btn:hover{border-bottom-color:var(--ink)}
.nav__item > a[aria-current="page"]{border-bottom-color:var(--ink);font-weight:700}
.nav__caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;flex-shrink:0}
.nav__btn[aria-expanded="true"]{border-bottom-color:var(--ink)}
.nav__btn[aria-expanded="true"] .nav__caret{transform:rotate(-135deg) translate(-3px,-3px)}

/* выпадающая панель */
.nav__sub{position:absolute;top:calc(100% + 14px);left:-20px;min-width:230px;
  background:var(--ground);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 8px;display:flex;flex-direction:column;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.3,1),visibility .25s}
.nav__item--sub.is-open .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__sub a{display:block;padding:9px 14px;font-size:14px;font-weight:500;border-radius:var(--r);
  white-space:nowrap;transition:background .15s,color .15s}
.nav__sub a:hover{background:var(--ground-alt);color:var(--violet)}
.nav__sub--wide{left:-24px;min-width:min(720px,calc(100vw - 80px))}
.nav__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px}
.nav__gr{padding:8px 14px 5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.nav__gr:not(:first-child){margin-top:8px;border-top:1px solid var(--line);padding-top:14px}
.nav__all{color:var(--violet);font-weight:700}

/* служебные части, видимые только в мобильной панели */
.nav__head,.nav__foot{display:none}

.header__contact{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;flex-shrink:0}
.tel{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--violet);white-space:nowrap}
.hours{font-size:11.5px;color:var(--ink-3);white-space:nowrap}

.burger{display:none;margin-left:auto;align-items:center;gap:9px;background:none;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;cursor:pointer;
  font-size:13px;font-weight:700}
.burger__lines{display:flex;flex-direction:column;gap:3.5px;width:16px}
.burger__lines i{display:block;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.burger[aria-expanded="true"] .burger__lines i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__lines i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__lines i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.nav-backdrop{position:fixed;inset:0;background:rgba(11,8,19,.5);z-index:70;
  opacity:0;transition:opacity .35s}
.nav-backdrop.is-on{opacity:1}
body.nav-open{overflow:hidden}

/* =========================================================================
   МОБИЛЬНОЕ МЕНЮ — панель выезжает из правого верхнего угла
   ========================================================================= */
@media (max-width:1100px){
  .burger{display:flex}
  .header__contact{display:none}

  .nav{position:fixed;top:0;right:0;z-index:80;
    width:min(86vw,390px);height:100dvh;max-height:100dvh;overflow-y:auto;
    background:var(--ground);border-left:1px solid var(--line);
    padding:22px 22px calc(22px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
    transform-origin:100% 0;
    transform:translateX(100%) scale(.94) rotate(2.5deg);
    opacity:0;visibility:hidden;
    transition:transform .46s cubic-bezier(.22,.75,.28,1),opacity .3s,visibility .46s}
  .nav.is-open{transform:none;opacity:1;visibility:visible}

  /* Порядок в панели: шапка → телефон и заявка → пункты меню */
  .nav__head{order:-2;display:flex;align-items:center;justify-content:space-between;
    padding-bottom:16px;border-bottom:1px solid var(--line)}
  .nav__list{order:0}
  .nav__title{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .nav__close{background:none;border:1px solid var(--line);border-radius:var(--r);
    width:38px;height:38px;cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}

  .nav__list{flex-direction:column;align-items:stretch;gap:0;margin-top:6px}
  .nav__item{border-bottom:1px solid var(--line)}
  /* пункты въезжают по очереди вслед за панелью */
  .nav.is-open .nav__item{animation:navIn .42s cubic-bezier(.2,.7,.3,1) both}
  .nav.is-open .nav__item:nth-child(1){animation-delay:.12s}
  .nav.is-open .nav__item:nth-child(2){animation-delay:.17s}
  .nav.is-open .nav__item:nth-child(3){animation-delay:.22s}
  .nav.is-open .nav__item:nth-child(4){animation-delay:.27s}
  .nav.is-open .nav__item:nth-child(5){animation-delay:.32s}
  .nav.is-open .nav__item:nth-child(6){animation-delay:.37s}
  @keyframes navIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

  .nav__item > a,.nav__btn{width:100%;justify-content:space-between;padding:15px 2px;
    font-size:17px;font-weight:700;letter-spacing:-.02em;border-bottom:0}
  .nav__item > a:hover,.nav__btn:hover{border-bottom-color:transparent}
  .nav__caret{width:8px;height:8px}

  /* подменю — гармошкой, без всплывающей панели */
  .nav__sub{position:static;min-width:0;border:0;padding:0 0 12px;background:none;
    opacity:1;visibility:visible;transform:none;border-radius:0;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1)}
  .nav__sub > *{overflow:hidden}
  .nav__item--sub.is-open .nav__sub{grid-template-rows:1fr}
  .nav__sub::before{display:none}
  .nav__cols{grid-template-columns:1fr;gap:0}
  .nav__sub a{padding:11px 14px;font-size:15px;white-space:normal}
  .nav__gr{padding:12px 14px 4px}
  .nav__gr:not(:first-child){margin-top:0;border-top:0;padding-top:14px}

  /* Телефон и заявка — сразу под шапкой панели, а не в самом низу:
     это первое, зачем открывают меню с телефона. */
  .nav__foot{order:-1;display:flex;flex-direction:column;align-items:stretch;gap:3px;
    padding:16px 0 4px}
  .nav__foot .tel{font-size:21px;letter-spacing:-.025em}
  .nav__foot .btn{margin-top:12px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none;transform:translateX(100%)}
  .nav.is-open{transform:none}
  .nav.is-open .nav__item{animation:none}
}

/* =========================================================================
   КНОПКИ
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.005em;
     padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
     cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn--primary{background:var(--pink);color:#fff}
.btn--primary:hover{background:var(--grad)}      /* единственная градиентная кнопка */
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:#fff}
.btn--ghost{padding:4px 0;background:none;color:var(--violet);border-bottom:1px solid currentColor;border-radius:0}
.btn--sm{font-size:13px;padding:10px 18px}
.btn--wide{width:100%}
/* Светлый вариант вторичной кнопки — на любом тёмном фоне.
   .page-hero--night здесь обязателен: без него кнопка на тёмной шапке
   услуги оставалась тёмной на тёмном и читалась только по наведению. */
.sec--night .btn--secondary,.form-sec .btn--secondary,
.page-hero--night .btn--secondary,.side-card--night .btn--secondary{
  color:var(--night-ink);border-color:var(--night-ink)}
.sec--night .btn--secondary:hover,.form-sec .btn--secondary:hover,
.page-hero--night .btn--secondary:hover,.side-card--night .btn--secondary:hover{
  background:var(--night-ink);color:var(--night)}
.page-hero--night .btn--ghost,.side-card--night .btn--ghost{color:var(--violet-lift)}

/* =========================================================================
   ГЕРОЙ  — кегль заголовка снижен: было clamp(34px,6.4vw,76px)
   ========================================================================= */
.hero{padding-block:clamp(40px,5.5vw,72px) clamp(36px,5vw,64px)}
.hero__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
         gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,54px);font-weight:900;letter-spacing:-.036em;
         line-height:1.02;text-wrap:balance}
.hero h1 span{color:var(--violet)}
.hero__p{font-size:16px;color:var(--ink-2);max-width:42ch;margin-top:18px}
.hero__gift{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;
            border-bottom:2px solid var(--pink);padding-bottom:2px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.tags li{font-size:12.5px;padding:6px 13px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

/* Композиция «две витрины» — собрана из реальных скриншотов работ.
   Никакой растровой подложки: рамки и хром нарисованы CSS. */
.showcase{position:relative;margin:0;padding-bottom:56px;padding-left:44px}
.win{border:1px solid var(--line);border-radius:var(--r);background:var(--ground);overflow:hidden}
.win__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--ground-alt)}
.win__dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line);flex-shrink:0}
.win__url{margin-left:6px;font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.win--back{position:absolute;left:0;bottom:0;width:46%;z-index:2;background:var(--ground)}
.win--back img{aspect-ratio:4/3}
.showcase figcaption{position:absolute;right:0;bottom:12px;font-size:11px;
                     letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Полоса цифр — раньше текст упирался в разделительную линию */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
       border-top:1px solid var(--line);margin-top:clamp(34px,4vw,56px)}
.stats > div{padding:24px 28px;border-right:1px solid var(--line)}
.stats > div:first-child{padding-left:0}
.stats > div:last-child{border-right:0;padding-right:0}
.stats b{display:block;font-size:clamp(26px,3vw,36px);font-weight:900;letter-spacing:-.035em;
         line-height:1;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.35}

/* =========================================================================
   ПОРТФОЛИО — 8 работ, сетка 4×2
   ========================================================================= */
.filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.filter a{font-size:12.5px;padding:11px 16px;border:1px solid var(--night-line);
          border-radius:var(--r);color:var(--night-ink-2);transition:border-color .15s,color .15s}
.filter a:hover{border-color:var(--night-ink-2);color:var(--night-ink)}
.filter a[aria-current="page"]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink);font-weight:700}

.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
       background:var(--night-line);border:1px solid var(--night-line)}
.case{background:var(--night-2);display:flex;flex-direction:column;transition:background .18s}
.case:hover{background:var(--night-3)}
.case figure{margin:0;border-bottom:1px solid var(--night-line);background:var(--night-3)}
.case img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.case__b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.case__type{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-lift)}
.case h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--night-ink)}
.case p:not(.case__type){font-size:13px;color:var(--night-ink-2);line-height:1.45}
.case__l{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:700;color:var(--violet-lift);
         border-bottom:1px solid currentColor;align-self:flex-start}
@media (max-width:1020px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cases{grid-template-columns:1fr}}

/* =========================================================================
   ПРЕИМУЩЕСТВА
   ========================================================================= */
.adv{border-top:1px solid var(--line)}
.adv__r{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr);
        gap:clamp(16px,3vw,40px);padding-block:26px;border-bottom:1px solid var(--line);align-items:start}
.adv__n{font-size:13px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:4px}
.adv h3{font-size:clamp(17px,2vw,21px);font-weight:800;letter-spacing:-.022em;line-height:1.2}
.adv p:not(.adv__n){font-size:14.5px;color:var(--ink-2)}
.adv p a{color:var(--violet);border-bottom:1px solid currentColor}

/* =========================================================================
   КОМАНДА — с фотографиями
   ========================================================================= */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,30px)}
.person{display:flex;flex-direction:column;gap:14px}
.person figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--violet-soft)}
.person img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top}
.person h3{font-size:16px;font-weight:800;letter-spacing:-.015em}
.person p:not(.person__y):not(.person__c){font-size:13.5px;color:var(--ink-2);line-height:1.45}
.person__y{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:2px}
@media (max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.team{grid-template-columns:1fr}}

/* =========================================================================
   ПРОЦЕСС — ровно 3 в ряд, две строки
   ========================================================================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--ground);padding:24px 22px 26px;display:flex;flex-direction:column;gap:9px}
.steps__n{font-size:12px;font-weight:700;color:var(--violet);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.steps h3{font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.steps p:not(.steps__n){font-size:13.5px;color:var(--ink-2);line-height:1.45}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* =========================================================================
   СЛАЙДЕР — общий компонент для клиентов и отзывов
   ========================================================================= */
.slider{position:relative}
.slider__track{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
               scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.slider__track::-webkit-scrollbar{display:none}
.slider__track > *{scroll-snap-align:start;flex:0 0 auto}
.slider__nav{display:flex;gap:8px;margin-top:22px}
.slider__btn{width:44px;height:44px;border:1px solid var(--line);background:var(--ground);
             border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;
             font-size:16px;line-height:1;transition:background .15s,color .15s,border-color .15s}
.slider__btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.slider__btn:disabled{opacity:.35;cursor:default}
.slider__count{margin-left:auto;align-self:center;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* клиенты */
.logos-track > li{width:clamp(160px,20vw,214px);background:var(--ground);border:1px solid var(--line);
                  margin-right:-1px;aspect-ratio:5/3;display:flex;align-items:center;justify-content:center;padding:22px}
.logos-track img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logos-track li:hover img{filter:none;opacity:1}

/* отзывы */
.rev-track{gap:clamp(18px,2.4vw,26px)}
.rev-track > article{width:min(400px,80vw);border-top:2px solid var(--ink);padding-top:18px;
                     display:flex;flex-direction:column;gap:14px}
.rev-track blockquote{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.rev-track footer{margin-top:auto}
.rev__n{font-size:14px;font-weight:800;letter-spacing:-.012em;display:block}
.rev__s{font-size:12px;color:var(--ink-3)}
.rev__l{font-size:12.5px;font-weight:700;color:var(--violet);border-bottom:1px solid currentColor;
        align-self:flex-start;margin-top:2px}

/* =========================================================================
   БЛОГ — внутри общей сетки, с обложками
   ========================================================================= */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.post{display:flex;flex-direction:column;gap:12px}
.post figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ground-alt)}
.post img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post__c{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.post h3{font-size:15.5px;font-weight:800;letter-spacing:-.018em;line-height:1.3}
.post h3 a:hover{border-bottom:1px solid currentColor}
.post__m{margin-top:auto;padding-top:6px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:1020px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.posts{grid-template-columns:1fr}}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;
             gap:18px;align-items:baseline;font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
/* Плюс превращается в минус поворотом, а не подменой символа */
.faq__ico{position:relative;width:14px;height:14px;flex-shrink:0;align-self:center}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;inset:0;margin:auto;
  background:var(--violet);border-radius:1px}
.faq__ico::before{width:14px;height:1.6px}
.faq__ico::after{width:1.6px;height:14px;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.faq details[open] .faq__ico::after{transform:rotate(90deg)}
.faq summary:hover{color:var(--violet)}

/* Раскрытие: строка грида едет с 0fr до 1fr — высота анимируется без фикс. значений */
.faq__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1)}
.faq details.is-open .faq__c{grid-template-rows:1fr}
.faq__c > div{overflow:hidden}
.faq__c p{padding:0 0 20px;font-size:14.5px;color:var(--ink-2);max-width:62ch}
@media (prefers-reduced-motion:reduce){
  .faq__c{transition:none}
  .faq__ico::after{transition:none}
}

/* =========================================================================
   СОГЛАСИЯ В ФОРМЕ
   ========================================================================= */
.agree{grid-column:1/-1;display:flex;flex-direction:column;gap:11px;margin-top:2px}
.agree__l{position:relative;display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:12.5px;line-height:1.5;color:var(--night-ink-2)}
/* Поле не схлопываем в нулевой размер: иначе браузеру некуда повесить
   системную подсказку о незаполненном обязательном согласии. */
.agree__l input{position:absolute;left:0;top:1px;width:19px;height:19px;
  margin:0;opacity:0;cursor:pointer}
.agree__b{width:19px;height:19px;flex-shrink:0;margin-top:1px;border:1px solid var(--night-line);
  border-radius:var(--r);background:transparent;position:relative;
  transition:background .18s,border-color .18s}
.agree__l:hover .agree__b{border-color:var(--night-ink-2)}
.agree__b::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid var(--night);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .16s,transform .2s cubic-bezier(.2,.7,.3,1)}
.agree__l input:checked ~ .agree__b{background:var(--violet-lift);border-color:var(--violet-lift)}
.agree__l input:checked ~ .agree__b::after{opacity:1;transform:rotate(45deg) scale(1)}
.agree__l input:focus-visible ~ .agree__b{outline:2px solid var(--violet-lift);outline-offset:3px}
.agree__l a{color:var(--violet-lift);border-bottom:1px solid currentColor}
.agree__opt{color:var(--ink-3)}
/* Незаполненное обязательное согласие подсвечивается только после попытки отправки */
.fields.was-submitted .agree__l input:required:invalid ~ .agree__b{border-color:#FF7A8F}
.agree__err{grid-column:1/-1;font-size:12.5px;color:#FF7A8F;display:none}
.fields.has-error .agree__err{display:block}

/* =========================================================================
   ФОРМА — тёмная секция, два столбца, альтернативные каналы связи
   ========================================================================= */
.form-sec{background:var(--night);color:var(--night-ink);padding-block:clamp(44px,6vw,80px)}
.form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:start}
.form-sec h2{color:var(--night-ink)}
.form-sec .sec__sub{color:var(--night-ink-2)}

.routes{display:flex;flex-direction:column;gap:1px;background:var(--night-line);
        border:1px solid var(--night-line);margin-top:26px}
.route{background:var(--night-2);padding:16px 20px;display:flex;align-items:center;gap:16px;transition:background .18s}
.route:hover{background:var(--night-3)}
.route__k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
          color:var(--night-ink-2);width:96px;flex-shrink:0}
.route__v{font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--night-ink)}
.route__a{margin-left:auto;color:var(--violet-lift);font-size:18px;line-height:1}

.form-card{background:var(--night-2);border:1px solid var(--night-line);padding:clamp(22px,3vw,34px)}
.form-card__t{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
              color:var(--violet-lift);margin-bottom:20px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--night-ink-2)}
.field input,.field textarea{border:0;border-bottom:1px solid var(--night-line);background:transparent;
  padding:11px 2px;font-size:15px;color:var(--night-ink);width:100%;border-radius:0;transition:border-color .18s}
.field input::placeholder,.field textarea::placeholder{color:#6A6389}
.field input:hover,.field textarea:hover{border-bottom-color:var(--night-ink-2)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--violet-lift);outline-offset:4px}
.field textarea{resize:vertical;min-height:64px}
.consent{grid-column:1/-1;font-size:12px;color:var(--night-ink-2);line-height:1.55}
.consent a{color:var(--violet-lift);border-bottom:1px solid currentColor}
.form-note{grid-column:1/-1;font-size:12px;color:var(--night-ink-2);display:flex;align-items:center;gap:8px}
.form-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-lift);flex-shrink:0}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}
@media (max-width:520px){.fields{grid-template-columns:1fr}}

/* =========================================================================
   ПОДВАЛ
   ========================================================================= */
.site-footer{background:var(--night-2);color:var(--night-ink-2);
             padding-block:clamp(36px,5vw,56px) 26px;border-top:1px solid var(--night-line)}
.site-footer__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(22px,3vw,40px)}
.site-footer h2{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
                color:var(--night-ink);margin-bottom:14px;max-width:none}
.site-footer ul{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.site-footer a:hover{color:var(--night-ink)}
.site-footer address{font-style:normal;font-size:13.5px;line-height:1.75}
.site-footer__b{margin-top:34px;padding-top:20px;border-top:1px solid var(--night-line);
                display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12px}

@media (max-width:820px){
  .hero__g{grid-template-columns:1fr}
  .showcase{padding-left:32px;padding-bottom:44px}
  /* Номер — <p class="adv__n">, поэтому правило .adv__r p забирало и его:
     номер уезжал во вторую колонку, а заголовок оставался в колонке
     шириной 36 px и разваливался по одной букве в строку. */
  .adv__r{grid-template-columns:36px minmax(0,1fr)}
  .adv__r > p:not(.adv__n){grid-column:2}
  .stats > div{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}
}

/* =========================================================================
   ДВИЖЕНИЕ
   Правило то же, что и с градиентом: тратим на немногое. Три места —
   вход первого экрана, стек-лента, счётчик скорости. Плюс отклик карточек
   на наведение. Никаких проявлений каждой секции при прокрутке.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .rise-1{animation-delay:.05s}.rise-2{animation-delay:.13s}.rise-3{animation-delay:.21s}
  .rise-4{animation-delay:.29s}.rise-5{animation-delay:.37s}.rise-6{animation-delay:.18s}

  /* Первый экран: витрины не проявляются, а раскрываются срезом навстречу
     друг другу — левая слева направо, правая справа налево. */
  @keyframes sliceFromRight{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
  @keyframes sliceFromLeft {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .showcase .win--main{animation:sliceFromRight .95s cubic-bezier(.22,.75,.28,1) .2s both}
  .showcase .win--back{animation:sliceFromLeft  .95s cubic-bezier(.22,.75,.28,1) .45s both}
}

/* =========================================================================
   ОТКЛИК НА НАВЕДЕНИЕ
   ========================================================================= */
/* шаги процесса */
.steps li{position:relative;overflow:hidden;transition:background .22s}
.steps li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--violet);
  transform:scaleY(0);transform-origin:top;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.steps li:hover{background:var(--ground-alt)}
.steps li:hover::before{transform:scaleY(1)}
.steps li h3{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.steps li:hover h3{transform:translateX(6px)}

/* команда: фото проворачивается вокруг вертикальной оси */
.person figure{perspective:900px}
.person figure img{transition:transform .95s cubic-bezier(.4,.05,.2,1)}
.person:hover figure img{transform:rotateY(360deg)}

/* отзывы */
.rev-track > article{transition:border-top-color .22s}
.rev-track > article:hover{border-top-color:var(--violet)}

/* цифры под первым экраном */
.stats > div{transition:background .2s}
.stats > div:hover{background:var(--ground-alt)}

@media (prefers-reduced-motion:reduce){
  .person:hover figure img{transform:none}
  .steps li:hover h3{transform:none}
  .chip:hover .chip__m{transform:none}
  .case:hover img{transform:none}
}

/* отклик карточки работы */
.case figure{overflow:hidden}
.case img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.case:hover img{transform:scale(1.045)}
.case__b{position:relative}
.case__b::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;
  background:var(--violet-lift);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.case:hover .case__b::after{transform:scaleX(1)}

/* =========================================================================
   СЧЁТЧИК СКОРОСТИ
   Замер берётся из Navigation Timing браузера посетителя. Это и есть
   доказательство тезиса «оцените скорость этого сайта» из блока преимуществ.
   Здесь же — четвёртое санкционированное применение градиента.
   ========================================================================= */
.speed{background:var(--night);color:var(--night-ink);padding-block:clamp(32px,4.5vw,56px)}
.speed__g{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3.5vw,52px);align-items:center}
.speed__v{font-size:clamp(46px,8vw,96px);font-weight:900;letter-spacing:-.055em;line-height:.86;
          font-variant-numeric:tabular-nums;white-space:nowrap}
.speed__v small{font-size:.28em;font-weight:700;letter-spacing:-.01em;margin-left:.08em}
.speed__t{font-size:clamp(16px,1.8vw,21px);font-weight:800;letter-spacing:-.025em;line-height:1.25;max-width:24ch}
.speed__n{font-size:12.5px;font-weight:400;color:var(--night-ink-2);margin-top:11px;max-width:46ch;line-height:1.5}
.speed__bar{grid-column:1/-1;height:3px;background:var(--night-line);margin-top:26px;overflow:hidden}
.speed__fill{display:block;height:100%;width:0;background:var(--grad);
             transition:width 1.4s cubic-bezier(.2,.7,.3,1)}
.speed__scale{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:9px;
              font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--night-ink-2)}
@media (max-width:660px){.speed__g{grid-template-columns:1fr}}

/* =========================================================================
   СТЕК — две встречные ленты
   ========================================================================= */
.stack-sec{background:var(--ground-alt);overflow:hidden}
.stack{display:flex;flex-direction:column;gap:14px;
       -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
               mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.stack__row{display:flex;width:max-content}
.stack__set{display:flex;gap:14px;padding-right:14px;flex-shrink:0}
@media (prefers-reduced-motion:no-preference){
  .stack__row{animation:drift 52s linear infinite}
  .stack__row--rev{animation-direction:reverse;animation-duration:64s}
  .stack:hover .stack__row,.stack:focus-within .stack__row{animation-play-state:paused}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .stack{mask-image:none;-webkit-mask-image:none}
  .stack__row{width:auto;flex-wrap:wrap;gap:14px}
  .stack__set{flex-wrap:wrap}
  .stack__set[aria-hidden]{display:none}
}
.chip{display:flex;align-items:center;gap:13px;padding:11px 20px 11px 14px;background:var(--ground);
      border:1px solid var(--line);border-radius:var(--r);flex-shrink:0;transition:border-color .2s}
.chip:hover{border-color:var(--ink)}
.chip__m{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
         transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.chip__m svg{width:100%;height:100%;display:block}
.chip:hover .chip__m{transform:scale(1.12)}
.chip__n{font-size:14.5px;font-weight:800;letter-spacing:-.018em;white-space:nowrap;line-height:1.25}
.chip__u{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.stack-hint{margin-top:22px;font-size:12.5px;color:var(--ink-3)}

/* Тач-цели: дискретные элементы управления не ниже 44 px */
@media (pointer:coarse){
  .nav a,.case__l,.header__contact a,.btn--ghost,.tel,.rev__l{min-height:44px;display:inline-flex;align-items:center}
  .site-footer ul{gap:0}
  .site-footer ul a{min-height:44px;display:inline-flex;align-items:center}
}

/* =========================================================================
   ДАЛЬШЕ — ЧАСТИ, КОТОРЫХ НЕТ НА ГЛАВНОЙ.
   Внутренние страницы: шапка раздела, хлебные крошки, длинный текст,
   листалка, светлый фильтр, новости, услуги, цены, контакты, кейс.
   ========================================================================= */

/* ---------- хлебные крошки ---------- */
.crumbs{font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.crumbs a:hover{color:var(--ink);border-bottom-color:currentColor}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs ol{display:contents}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs [aria-current]{color:var(--ink-2)}
.sec--night .crumbs,.page-hero--night .crumbs{color:var(--night-ink-2)}
.sec--night .crumbs a:hover,.page-hero--night .crumbs a:hover{color:var(--night-ink)}
.sec--night .crumbs li+li::before,.page-hero--night .crumbs li+li::before{color:var(--night-line)}

/* ---------- шапка внутренней страницы ---------- */
/* Тот же типографский приём, что и на первом экране, но кегль ниже:
   внутренняя страница не должна кричать громче главной. */
.page-hero{padding-block:clamp(26px,3.5vw,44px) clamp(28px,4vw,52px);border-bottom:1px solid var(--line)}
.page-hero__in{display:flex;flex-direction:column;gap:14px}
.page-hero h1{font-size:clamp(26px,3.8vw,46px);font-weight:900;letter-spacing:-.034em;
  line-height:1.04;max-width:19ch;text-wrap:balance}
.page-hero__p{font-size:16px;color:var(--ink-2);max-width:62ch}
.page-hero__meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.page-hero--night{background:var(--night);color:var(--night-ink);border-bottom-color:var(--night-line)}
.page-hero--night .page-hero__p{color:var(--night-ink-2)}
.page-hero--night .page-hero__meta{color:var(--night-ink-2)}

/* Полоса-итог под шапкой: те же цифры, что в .stats, но на тёмном.
   Нижнюю границу задаём тоже: на узких экранах разделители переключаются
   с правых на нижние, и светлая линия оставалась поперёк тёмного фона. */
.page-hero--night .stats{border-top-color:var(--night-line)}
.page-hero--night .stats > div{border-right-color:var(--night-line);
  border-bottom-color:var(--night-line)}
.page-hero--night .stats span{color:var(--night-ink-2)}
.page-hero--night .stats > div:hover{background:var(--night-2)}

/* На узком экране цифры в две колонки не помещаются: «от 180 000 ₽»
   ломалось так, что знак рубля уезжал на вторую строку, а подпись
   переставала совпадать с соседней. Одна колонка на строку. */
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stats b{font-size:clamp(23px,7vw,30px)}
  .stats > div{padding-block:18px}
}

/* Кнопки в шапке страницы на узком экране — во всю ширину:
   иначе рядом стоят две кнопки разной длины и это выглядит случайным. */
@media (max-width:520px){
  .page-hero__cta{flex-direction:column;align-items:stretch}
  .page-hero__cta .btn{width:100%}
}

/* ---------- светлый фильтр разделов ---------- */
/* .filter из главной живёт на тёмном фоне; этот — на светлом */
.chips-f{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(20px,3vw,30px)}
.chips-f a{font-size:12.5px;padding:11px 16px;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);transition:border-color .15s,color .15s}
.chips-f a:hover{border-color:var(--ink-3);color:var(--ink)}
.chips-f a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.chips-f__n{color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:5px}
.chips-f a[aria-current="page"] .chips-f__n{color:rgba(255,255,255,.6)}

/* ---------- листалка ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:clamp(30px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.pager a,.pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:background .15s,color .15s,border-color .15s}
.pager a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager [aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager__gap{border:0;min-width:22px;color:var(--ink-3)}
.pager__side{margin-left:auto;font-size:12.5px;color:var(--ink-3);border:0;height:auto;padding:0}

/* Листалка на тёмной секции.
   Без этого метка текущей страницы получала фон var(--ink) — почти тот же
   цвет, что и сама секция, и номер пропадал. Рамки соседних страниц при
   этом светились светло-серым. */
.sec--night .pager{border-top-color:var(--night-line)}
.sec--night .pager a,.sec--night .pager span{border-color:var(--night-line)}
.sec--night .pager a{color:var(--night-ink)}
.sec--night .pager a:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.sec--night .pager [aria-current="page"]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.sec--night .pager__gap,.sec--night .pager__side{border:0;color:var(--night-ink-2)}

/* ---------- двухколоночная раскладка «текст + боковик» ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,64px);align-items:start}
.layout__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr)}
  /*
   * display:contents убирает саму колонку из раскладки, а её содержимое
   * становится строками общей сетки. Только так содержание можно поднять
   * над текстом: иначе оно оказывается под всей статьёй, где список
   * «перейти к разделу» уже никому не нужен. Карточки с призывом,
   * наоборот, остаются внизу — там им и место.
   */
  .layout__side{display:contents}
  .layout__side .toc{order:-1}
  .layout__side .side-card,.layout__side .facts{order:1}
}

/* ---------- содержание статьи ---------- */
.toc{border-top:2px solid var(--ink);padding-top:14px}
.toc__t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.toc ol{display:flex;flex-direction:column;gap:9px;counter-reset:toc}
.toc a{font-size:13.5px;color:var(--ink-2);display:flex;gap:9px;line-height:1.4;
  border-bottom:1px solid transparent;transition:color .15s}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);
  color:var(--ink-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.toc a:hover{color:var(--violet)}
.toc a[aria-current]{color:var(--violet);font-weight:700}

/* ---------- боковая карточка ---------- */
.side-card{border:1px solid var(--line);border-radius:var(--r);padding:20px}
.side-card--night{background:var(--night);border-color:var(--night);color:var(--night-ink)}
.side-card h3{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.side-card p{font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.5}
.side-card--night p{color:var(--night-ink-2)}
.side-card .btn{margin-top:16px}

/* ---------- длинный текст ---------- */
/* Единственное место на сайте, где нужна полная типографика: всё
   остальное собрано из карточек с заданными кеглями. */
.article{max-width:72ch;font-size:16.5px;line-height:1.68;color:var(--ink)}
.article > * + *{margin-top:1.1em}
.article h2{font-size:clamp(21px,2.4vw,28px);font-weight:900;letter-spacing:-.028em;
  line-height:1.15;margin-top:1.9em;max-width:26ch;scroll-margin-top:96px}
.article h3{font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.022em;
  line-height:1.25;margin-top:1.6em;scroll-margin-top:96px}
.article p{color:var(--ink-2)}
.article a{color:var(--violet);border-bottom:1px solid currentColor}
.article strong{font-weight:800;color:var(--ink)}
.article ul,.article ol{display:flex;flex-direction:column;gap:9px;color:var(--ink-2);padding-left:0}
.article ul li{position:relative;padding-left:22px}
.article ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  background:var(--violet);border-radius:50%}
.article ol{counter-reset:a}
.article ol li{position:relative;padding-left:32px}
.article ol li::before{counter-increment:a;content:counter(a);position:absolute;left:0;top:0;
  font-size:13px;font-weight:800;color:var(--violet);font-variant-numeric:tabular-nums}
.article blockquote{border-left:2px solid var(--violet);padding:2px 0 2px 22px;
  font-size:17.5px;line-height:1.5;color:var(--ink);font-weight:500}
.article figure{margin:2em 0}
.article figure img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.article figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.article hr{height:1px;background:var(--line);border:0;margin:2.4em 0}
.article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--ground-alt);padding:2px 6px;border-radius:var(--r)}
.article pre{background:var(--night);color:var(--night-ink);padding:20px;border-radius:var(--r);
  overflow-x:auto;font-size:13px;line-height:1.6}
.article pre code{background:none;padding:0;color:inherit}
.article table{width:100%;border-collapse:collapse;font-size:14.5px}
.article th,.article td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.article th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.article .lead{font-size:18px;color:var(--ink);font-weight:500;line-height:1.55}

/* врезка внутри текста */
.note{border:1px solid var(--line);border-left:2px solid var(--violet);border-radius:var(--r);
  padding:18px 20px;background:var(--ground-alt);font-size:14.5px;color:var(--ink-2)}
.note b{display:block;color:var(--ink);font-weight:800;margin-bottom:5px;font-size:13.5px}

/* ---------- автор и дата ---------- */
.byline{display:flex;align-items:center;gap:13px;padding-block:18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--violet-soft)}
.byline b{display:block;font-size:14px;font-weight:800;letter-spacing:-.012em}
.byline span{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.byline__share{margin-left:auto;display:flex;gap:7px}
.byline__share a{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--ink-3);transition:border-color .15s,color .15s}
.byline__share a:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- новости: список во главе с датой ---------- */
/* От блога отличается намеренно: у новости нет обложки и категории,
   её единственная ось — время, поэтому дата стоит первой. */
.news{border-top:1px solid var(--line)}
.news__i{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(16px,3vw,36px);
  padding-block:24px;border-bottom:1px solid var(--line);align-items:baseline;transition:background .18s}
.news__i:hover{background:var(--ground-alt)}
.news__d{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap}
.news__b h3{font-size:clamp(16px,1.9vw,19px);font-weight:800;letter-spacing:-.02em;line-height:1.28}
.news__b h3 a{border-bottom:1px solid transparent;transition:border-color .15s}
.news__i:hover h3 a{border-bottom-color:currentColor}
.news__b p{font-size:14px;color:var(--ink-2);margin-top:7px;max-width:74ch}
.news__tag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet)}
@media (max-width:620px){
  .news__i{grid-template-columns:1fr;gap:7px}
}

/* ---------- услуги ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc__i{background:var(--ground);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;transition:background .2s}
.svc__i:hover{background:var(--ground-alt)}
.svc__i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--violet);
  transform:scaleY(0);transform-origin:top;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.svc__i:hover::before{transform:scaleY(1)}
.svc__i h3{font-size:17.5px;font-weight:800;letter-spacing:-.022em;line-height:1.2}
.svc__i h3 a::after{content:"";position:absolute;inset:0}
.svc__i p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.svc__l{display:flex;flex-direction:column;gap:5px;margin-top:2px;font-size:13px;color:var(--ink-2)}
.svc__l li{position:relative;padding-left:16px}
.svc__l li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  background:var(--line);border-radius:50%}
.svc__p{margin-top:auto;padding-top:16px;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px}
.svc__p b{font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--ink)}
@media (max-width:960px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc{grid-template-columns:1fr}}

/* ---------- цены ---------- */
.tariffs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tariff{background:var(--ground);padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px}
.tariff--hi{background:var(--night);color:var(--night-ink)}
.tariff__k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.tariff--hi .tariff__k{color:var(--violet-lift)}
.tariff h3{font-size:20px;font-weight:900;letter-spacing:-.028em}
.tariff__v{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.tariff__v small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);
  letter-spacing:0;margin-top:7px}
.tariff--hi .tariff__v small{color:var(--night-ink-2)}
.tariff ul{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--ink-2);
  padding-top:14px;border-top:1px solid var(--line)}
.tariff--hi ul{color:var(--night-ink-2);border-top-color:var(--night-line)}
.tariff li{position:relative;padding-left:20px;line-height:1.45}
.tariff li::before{content:"";position:absolute;left:1px;top:.42em;width:8px;height:4px;
  border-left:1.6px solid var(--violet);border-bottom:1.6px solid var(--violet);transform:rotate(-45deg)}
.tariff--hi li::before{border-color:var(--violet-lift)}
.tariff li[data-no]{color:var(--ink-3)}
.tariff li[data-no]::before{border:0;width:8px;height:1.6px;background:var(--line);transform:none;top:.72em}
.tariff .btn{margin-top:auto}
@media (max-width:900px){.tariffs{grid-template-columns:1fr}}

/* таблица «что входит» */
.compare{width:100%;border-collapse:collapse;font-size:14px}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.compare thead th{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-width:2px;border-bottom-color:var(--ink)}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare td{text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums;width:130px}
.compare tr:hover{background:var(--ground-alt)}
.compare .yes{color:var(--violet);font-weight:800}
.compare .no{color:var(--line)}
/*
 * Широкая таблица прокручивается внутри своей обёртки. На узком экране
 * это незаметно: таблица выглядит просто обрезанной. Затемнение у правого
 * края и подпись появляются, только когда прокручивать действительно есть
 * куда — класс ставит site.js.
 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.table-wrap table{min-width:640px}
.table-scrollable{position:relative}
.table-scrollable::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--ground));pointer-events:none}
.sec--alt .table-scrollable::after{background:linear-gradient(90deg,rgba(247,246,250,0),var(--ground-alt))}
.table-scrollable.is-end::after{opacity:0;transition:opacity .2s}
.table-hint{margin-top:9px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.table-hint::before{content:"\2194";font-size:14px}

/* ---------- кейс: результаты ---------- */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--night-line);border:1px solid var(--night-line)}
.results > div{background:var(--night-2);padding:24px 22px}
.results b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--night-ink)}
.results b i{font-style:normal;color:var(--violet-lift);font-size:.6em;margin-right:.12em}
.results span{display:block;font-size:12.5px;color:var(--night-ink-2);margin-top:9px;line-height:1.4}

/* факты о проекте */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px;font-size:14px;
  border-top:1px solid var(--line);padding-top:20px}
.facts dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.facts dd{color:var(--ink)}
.facts dd a{color:var(--violet);border-bottom:1px solid currentColor}

/* галерея экранов проекта */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.shots figure{margin:0}
.shots img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.shots figcaption{margin-top:9px;font-size:12.5px;color:var(--ink-3)}
.shots--full{grid-template-columns:1fr}
@media (max-width:640px){.shots{grid-template-columns:1fr}}

/* ---------- отзывы: полный список ---------- */
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rev{background:var(--ground);padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  transition:background .18s}
.rev:hover{background:var(--ground-alt)}
.rev__q{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rev__f{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:13px}
.rev__logo{width:52px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;padding:7px;background:var(--ground)}
.rev__logo img{max-height:100%;width:auto;object-fit:contain}
.rev__stars{color:var(--violet);font-size:13px;letter-spacing:.14em}
@media (max-width:760px){.revs{grid-template-columns:1fr}}

/* ---------- контакты ---------- */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.contacts > div{background:var(--ground);padding:26px 24px;display:flex;flex-direction:column;gap:7px}
.contacts dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.contacts dd{font-size:17px;font-weight:800;letter-spacing:-.02em}
.contacts dd a:hover{color:var(--violet)}
.contacts p{font-size:13px;color:var(--ink-2);line-height:1.5}
.map{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:21/9;background:var(--ground-alt);
  display:grid;place-items:center;color:var(--ink-3);font-size:13px;overflow:hidden}
.map img,.map iframe{width:100%;height:100%;object-fit:cover;border:0}
@media (max-width:600px){.map{aspect-ratio:4/3}}

/* реквизиты */
.req{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 24px;font-size:13.5px}
.req dt{color:var(--ink-3)}
.req dd{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- поиск ---------- */
.search-box{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.search-box input{flex:1 1 320px;border:0;border-bottom:2px solid var(--ink);background:transparent;
  padding:12px 2px;font-size:19px;font-weight:700;letter-spacing:-.02em;border-radius:0}
.search-box input::placeholder{color:var(--ink-3);font-weight:400;letter-spacing:0}
/* На телефоне кнопка переносится под поле и стоит короткой плашкой у
   левого края — растягиваем её, чтобы строка поиска читалась как одно целое. */
@media (max-width:520px){ .search-box .btn{width:100%} }
.search-res{border-top:1px solid var(--line)}
.search-res__i{padding-block:22px;border-bottom:1px solid var(--line);display:flex;
  flex-direction:column;gap:6px;transition:background .18s}
.search-res__i:hover{background:var(--ground-alt)}
.search-res__u{font-size:12px;color:var(--ink-3)}
.search-res__i h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.search-res__i h3 a{color:var(--violet)}
.search-res__i h3 a:hover{border-bottom:1px solid currentColor}
.search-res__i p{font-size:14px;color:var(--ink-2);max-width:76ch}
.search-res mark{background:var(--violet-soft);color:inherit;padding:0 2px}

/* ---------- 404 ---------- */
.e404{min-height:min(62vh,540px);display:grid;place-items:center;text-align:center;
  padding-block:clamp(40px,7vw,90px)}
.e404__n{font-size:clamp(80px,16vw,180px);font-weight:900;letter-spacing:-.06em;line-height:.82;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.e404 h1{font-size:clamp(22px,3vw,32px);font-weight:900;letter-spacing:-.03em;margin-top:22px;max-width:20ch}
.e404 p:not(.e404__n){font-size:15.5px;color:var(--ink-2);margin-top:14px;max-width:52ch}
.e404__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.e404__links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:34px;
  padding-top:26px;border-top:1px solid var(--line);font-size:13.5px}
.e404__links a{color:var(--ink-2);border-bottom:1px solid transparent}
.e404__links a:hover{color:var(--violet);border-bottom-color:currentColor}

/* ---------- команда: расширенная карточка ---------- */
.person__c{display:flex;gap:9px;margin-top:2px}
.person__c a{font-size:12px;color:var(--ink-3);border-bottom:1px solid transparent}
.person__c a:hover{color:var(--violet);border-bottom-color:currentColor}

/* ---------- «читайте также» ---------- */
.also{border-top:1px solid var(--line);padding-top:clamp(26px,3.5vw,40px);
  margin-top:clamp(34px,4.5vw,56px)}
.also__t{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);margin-bottom:20px}

/* ---------- вакансии ---------- */
.vac{border-top:1px solid var(--line)}
.vac__i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  padding-block:22px;border-bottom:1px solid var(--line);transition:background .18s}
.vac__i:hover{background:var(--ground-alt)}
.vac__i h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.vac__i p{font-size:13.5px;color:var(--ink-2);margin-top:5px}
.vac__s{font-size:15px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){.vac__i{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
   ЗАМЕТКА О ВЕСЕ СЕЛЕКТОРОВ
   Правило вида «.block тег» весит больше, чем «.block__элемент»: класс плюс
   тег против одного класса. Поэтому там, где элемент блока — это тот же тег,
   что описан общим правилом (номер пункта в .adv — это <p>, число 404 — тоже
   <p>), общее правило молча перебивает частное. Так номер 404 выводился
   кеглем 15 px вместо 80, а номер пункта терял начертание.
   Ниже такие места разведены через :not(). Добавляя новый элемент блока,
   проверьте, не описан ли его тег общим правилом того же блока.
   ------------------------------------------------------------------------- */