/* ── герой главной ─────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(22px,4vw,56px) clamp(28px,4vw,52px);overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-18%;width:min(1100px,120%);aspect-ratio:1;translate:-50% 0;
  background:radial-gradient(circle,rgba(52,199,89,.16),transparent 62%);pointer-events:none;z-index:-2}
/* Сетка точек живёт над свечением и под текстом. */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero h1{font-size:clamp(44px,11.5vw,182px);font-weight:800;letter-spacing:-.055em;line-height:.94}
.hero h1 .thin{font-weight:300;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(20px,4vw,64px);
  align-items:end;margin-top:clamp(22px,3.4vw,46px)}
.hero-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.42;color:var(--muted);max-width:46ch}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.hero-facts{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);padding-left:22px}
.fact{display:flex;gap:14px;align-items:baseline;font-size:14px;color:var(--muted)}
.fact b{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;min-width:4.2em}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0}

/* ── бегущая строка ────────────────────────────────────────── */
.ticker{position:relative;border-block:1px solid var(--line);display:flex;align-items:center;
  margin-inline:calc(-1*var(--gutter))}
.ticker-view{flex:1;overflow:hidden;padding-block:13px;min-width:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent)}
.ticker-row{display:flex;gap:44px;width:max-content;animation:ticker-slide 38s linear infinite}
.ticker-row span{font-family:var(--display);font-size:clamp(15px,1.9vw,26px);font-weight:300;letter-spacing:-.03em;
  color:var(--dim);display:flex;align-items:center;gap:44px;white-space:nowrap}
.ticker-row span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8;flex:none}
/* Движение, которое началось само и длится дольше пяти секунд, обязано
   иметь способ остановки: кнопка и наведение — два разных способа.
   Наведение слушает только сама лента: будь это вся полоса, кнопка
   «пуск» не отпускала бы её, пока с неё не уведут курсор. */
.ticker-view:hover .ticker-row,.ticker[data-paused] .ticker-row{animation-play-state:paused}
.ticker-stop{flex:none;width:44px;height:44px;margin-right:6px;display:grid;place-items:center;background:none;
  border:0;border-left:1px solid var(--line);color:var(--dim);cursor:pointer;transition:color .2s}
.ticker-stop:hover{color:var(--ink)}
.ticker-stop svg{width:13px;height:13px;fill:currentColor}
.ticker-stop .i-play{display:none}
[data-paused] .ticker-stop .i-play{display:block}
[data-paused] .ticker-stop .i-pause{display:none}
@keyframes ticker-slide{to{transform:translateX(-50%)}}

/* ── «Нас выбрали»: лента логотипов ─────────────────────────
   Тёмная полоса перед подвалом. Лента собрана из двух одинаковых
   половин и едет ровно на половину своей ширины — стык незаметен.
   Чтобы половина была именно половиной, отступ между логотипами
   висит на самом логотипе (margin-right), а не на строке (gap):
   иначе последний промежуток выпадает из расчёта и лента дёргается.  */
.clients{background:var(--bg-2);border-block:1px solid var(--line);
  margin-inline:calc(-1*var(--gutter));padding-block:clamp(28px,3.6vw,46px)}
.clients-head{padding-inline:var(--gutter);margin:0 0 clamp(18px,2.2vw,28px)}
.logo-strip{display:flex;align-items:center}
.logo-view{flex:1;overflow:hidden;min-width:0;padding-block:6px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Никаких отступов на самой строке: сдвиг на 50% считается от всей её
   ширины, и лишний padding увёл бы стык на половину этого отступа. */
.logo-row{--logo-gap:clamp(48px,7vw,108px);
  display:flex;align-items:center;width:max-content;
  animation:ticker-slide 46s linear infinite}
.logo-row img{display:block;flex:none;width:auto;height:clamp(24px,3.1vw,38px);
  margin-right:var(--logo-gap);opacity:.7;transition:opacity .25s}
.logo-view:hover .logo-row img{opacity:.92}
.logo-view:hover .logo-row,.logo-strip[data-paused] .logo-row{animation-play-state:paused}
/* Кнопка встаёт по той же вертикали, что и заголовок слева. */
.logo-strip .ticker-stop{border-left:0;margin-right:max(0px,calc(var(--gutter) - 14px))}

/* ── секции ────────────────────────────────────────────────── */
.editorial-section{padding-block:clamp(48px,7vw,110px)}
.editorial-section+.editorial-section{border-top:1px solid var(--line)}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3.2vw,46px)}
.section-top p{color:var(--muted);max-width:40ch;font-size:15px;margin:0}
.editorial-section h2{font-size:clamp(24px,3.2vw,40px);font-weight:600;margin:0 0 18px;letter-spacing:-.035em}
.section-top h2{margin:0;font-size:clamp(28px,5vw,72px);letter-spacing:-.05em}
.editorial-section h3{font-size:clamp(19px,1.9vw,25px);font-weight:500;margin:30px 0 10px;letter-spacing:-.02em}
.editorial-section p,.editorial-section li{max-width:78ch;line-height:1.65;color:#C9CEC8}
.editorial-section ul,.editorial-section ol{padding-left:22px;display:flex;flex-direction:column;gap:9px;margin:14px 0}
.editorial-section p+p{margin-top:14px}
.editorial-section p a,.editorial-section li a{color:var(--accent);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}

/* ── услуги строками (главная и внутренние) ────────────────── */
.service-grid{display:flex;flex-direction:column}
.service-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr) auto;
  gap:clamp(12px,2.2vw,38px);align-items:center;padding-block:clamp(18px,2.3vw,30px);
  border-top:1px solid var(--line);counter-increment:srv;
  transition:padding-left .3s cubic-bezier(.4,0,.2,1),background .3s}
.service-card:last-child{border-bottom:1px solid var(--line)}
.service-card::before{content:counter(srv,decimal-leading-zero);font-family:var(--display);font-size:12px;
  font-weight:600;color:var(--dim);letter-spacing:.1em;font-variant-numeric:tabular-nums;transition:color .25s}
.service-card h2,.service-card h3{font-family:var(--display);font-size:clamp(19px,2.4vw,34px);font-weight:400;
  margin:0;letter-spacing:-.035em;line-height:1.05;transition:color .25s}
.service-card p{color:var(--muted);font-size:14px;line-height:1.45;margin:0;max-width:none}
.service-card::after{content:"";width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5F1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:border-color .25s,background-color .25s}
.service-grid{counter-reset:srv}
.service-card:hover,.service-card:focus-visible{padding-left:clamp(8px,1.3vw,20px);
  background:linear-gradient(90deg,rgba(52,199,89,.07),transparent 55%)}
.service-card:hover::before,.service-card:focus-visible::before{color:var(--accent)}
.service-card:hover::after,.service-card:focus-visible::after{border-color:var(--accent);background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307120A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.service-card:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--accent)}

/* ── коллаж кейса ──────────────────────────────────────────── */
.collage{position:relative;background:var(--pane);border-radius:12px;padding:clamp(8px,.9vw,14px);
  display:flex;flex-direction:column;gap:clamp(8px,.85vw,12px);isolation:isolate;
  transform-style:preserve-3d;will-change:transform}
/* Размытая подложка живёт в своей коробке: обрезать её на самом коллаже
   нельзя — overflow:hidden выключает трёхмерность у всего, что внутри. */
.collage-wash-box{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  transform:translateZ(-1px);z-index:-1}
.collage-wash{width:100%;height:100%;object-fit:cover;
  filter:blur(48px) saturate(.6);opacity:.3;transform:scale(1.25)}
.collage-row{display:flex;gap:clamp(8px,.85vw,12px);width:100%;margin-inline:auto;
  max-width:calc(var(--cap) * var(--sum));transform-style:preserve-3d}
/* Доля кадра в ряду — его пропорция, делённая на сумму пропорций ряда.
   Без деления flex-grow меньше единицы (узкий кадр — 0.46), и ряд из
   одного вертикального кадра занимал бы меньше половины своей ширины. */
.collage-row figure{margin:0;flex-grow:calc(var(--ar) / var(--sum));flex-shrink:1;flex-basis:0;min-width:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.collage-row img{width:100%;height:auto;border-radius:7px;box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:box-shadow .35s ease}

/* ── карточка кейса наклоняется под курсором ───────────────── */
/* Коллаж лежит в перспективе: курсор задаёт угол, кадры приподнимаются
   над подложкой, и плоская картинка становится сценой с глубиной.
   Считается только на устройствах с настоящим курсором. */
.tilt{perspective:1500px}
.tilt .collage{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.tilt.is-live .collage{transition:transform .08s linear}
.tilt.is-live .collage-row figure{transform:translateZ(var(--lift,34px))}
.tilt.is-live .collage-row img{box-shadow:0 26px 54px rgba(0,0,0,.62)}
@media (hover:none),(pointer:coarse){.tilt{perspective:none}}

/* ── карусель проектов ─────────────────────────────────────── */
/* Раньше кейсы шли стопкой сверху вниз: при семи проектах это уже длинная
   лента, при пятнадцати — бесконечная. Карусель держит высоту блока
   постоянной независимо от числа кейсов. */
/* Стрелки живут в текстовой колонке карточки, а не в шапке секции: карточка
   занимает экран целиком, и управление за её пределами просто не видно. */
.case-nav{display:flex;align-items:center;gap:10px;margin-top:clamp(22px,2.6vw,34px)}
.case-no{font-family:var(--display);font-size:13px;font-weight:600;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;margin-right:6px}
.arrow{width:48px;height:48px;border:1px solid var(--line-2);border-radius:50%;background:none;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:none;
  transition:border-color .2s,background .2s,color .2s,opacity .2s}
.arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.arrow:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.arrow:disabled{opacity:.3;cursor:default}

.carousel-track{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius)}
.case{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.case-card{height:100%;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(15px,1.9vw,28px);
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(15px,2.2vw,34px)}
/* Карточки тянутся на высоту самой высокой, а навигация прижата к низу
   текстовой колонки — так стрелки стоят на одном уровне у всех проектов и
   не скачут при перелистывании. Сам текст при этом остаётся по центру. */
.case-text{display:grid;grid-template-rows:1fr auto;min-width:0}
.case-copy{align-self:center;min-width:0}
.case-card>.tilt{align-self:center}
.case-text h3{font-family:var(--display);font-size:clamp(25px,2.9vw,42px);font-weight:600;margin:0;
  letter-spacing:-.04em;line-height:1.02}
.case-cat{margin-top:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.case-desc{color:var(--muted);margin-top:16px;line-height:1.5;max-width:38ch}

.carousel-dots{display:flex;justify-content:center;gap:2px;margin-top:14px}
.dot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;
  border-radius:8px}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line-2);
  transition:background .2s,border-color .2s,transform .2s}
.dot[aria-selected="true"]::before{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.dot:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}

/* ── студия и журнал ───────────────────────────────────────── */
/* Кольцо: текст идёт по скруглённому прямоугольнику, обводящему блок.
   Рамка задаёт отступ, чтобы строка не наезжала на текст внутри. */
.studio-frame{position:relative;padding:clamp(30px,3.6vw,54px) clamp(24px,3vw,46px)}
.studio-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.studio-ring text{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--accent);opacity:.62}
.studio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start}
.studio blockquote{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.04em;line-height:1.1;
  font-size:clamp(23px,3.3vw,46px);max-width:none}
.studio blockquote b{font-weight:600;color:var(--accent)}
.studio-side{display:flex;flex-direction:column;gap:14px}
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.post{background:var(--bg-2);padding:clamp(20px,2.6vw,38px);display:flex;flex-direction:column;gap:12px;
  transition:background .25s}
.post:hover{background:var(--surface)}
.post h3{font-family:var(--display);font-size:clamp(18px,1.9vw,26px);font-weight:400;line-height:1.12;margin:0;
  letter-spacing:-.03em}
.post p{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0;max-width:none}
.post .link{margin-top:auto}

/* ── внутренние страницы ───────────────────────────────────── */
.breadcrumbs{padding-top:26px;color:var(--dim);font-size:13px;line-height:1.9}
.breadcrumbs a:hover{color:var(--accent)}
.intro{position:relative;padding-block:clamp(34px,5vw,72px) clamp(26px,3.4vw,48px);max-width:1000px}
/* Существам тесно в одном блоке: холст растянут на весь экран и держится
   при прокрутке. Он лежит под содержимым и курсор не перехватывает. */
.spider-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.spider-fx canvas{display:block;width:100%;height:100%}
/* Модальный диалог и так в верхнем слое — ему z-index не нужен. */
.site-shell{position:relative;z-index:1}
.intro h1{font-size:clamp(34px,6vw,84px);font-weight:700;letter-spacing:-.05em;line-height:.98;margin:18px 0}
.lead{font-size:clamp(17px,1.6vw,23px);line-height:1.48;max-width:60ch;color:var(--muted)}
.intro .text-link{margin-top:6px}
.byline{color:var(--dim);font-size:13px;margin:0 0 26px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(16px,2.4vw,34px);
  padding-left:0!important;list-style:none;counter-reset:step}
.steps li{counter-increment:step;border-top:1px solid var(--line);padding-top:16px;max-width:none}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--display);font-size:12px;
  font-weight:600;color:var(--accent);letter-spacing:.1em;margin-bottom:10px}
.steps h3{margin:0 0 8px;font-size:19px}
details{border-top:1px solid var(--line);padding-block:18px}
details[open]{padding-bottom:22px}
summary{font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:400;cursor:pointer;
  letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1;flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:12px}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-facts{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  /* В одну колонку карточки больше НЕ равняются по самой высокой: у кейсов
     разное число кадров, и из-за выравнивания в коротких карточках
     набегало под восемь сотен пустых точек — коллаж висел по центру
     растянутой строки, оторванный и от текста, и от стрелок. Теперь всё
     идёт встык: текст, сразу под ним коллаж, под коллажем навигация.
     display:contents распускает текстовую колонку в сетку карточки, а order
     пропускает коллаж вперёд — в разметке он идёт после текста. */
  .carousel-track{align-items:start}
  .case-card{height:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .case-text{display:contents}
  .case-copy{align-self:start}
  .case-card>.tilt{align-self:start}
  .case-nav{order:1;align-self:start;margin-top:clamp(16px,3.2vw,26px)}
  /* Кадров на телефоне четыре и идут столбиком, поэтому подложка и зазоры
     между ними сжимаются до минимума — иначе карточка растёт на пустом. */
  .collage{padding:7px;gap:7px}
  .collage-row{gap:7px}
  .service-card{grid-template-columns:auto minmax(0,1fr) auto;row-gap:7px}
  .service-card p{grid-column:2/-1}
  .studio{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ticker-row{animation:none}
  .ticker-stop{display:none}
  /* Логотипы не едут — вторая половина ленты лишняя, а первая
     становится обычной строкой с переносом. */
  .logo-view{-webkit-mask:none;mask:none}
  .logo-row{animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    padding-left:0;row-gap:clamp(18px,2.6vw,30px)}
  .logo-row img[data-dupe]{display:none}
  .logo-row img{margin-inline:calc(var(--logo-gap) / 2)}
  .carousel-track{scroll-behavior:auto}
  .service-card{transition:none}
}