/* ============================================================
   систм — ИТ-бюро. Лендинг.
   Дизайн-система: светлые секции + тёмные CTA/footer, жёлтый акцент-маркер (#FFD23F).
   3 визуальных направления переключаются через [data-direction].
   ============================================================ */

/* Шрифт вордмарка — как на kerna.studio (OffBit DotBold, точечный дисплей) */
@font-face{
  font-family:OffBit;
  src:url(fonts/OffBit-DotBold.woff2) format("woff2");
  font-style:normal; font-weight:700; font-display:swap;
  text-rendering:optimizeLegibility;
}

:root{
  /* — Цвет — */
  --ink:#0A0A10;          /* тёмный фон (hero/CTA/footer) */
  --ink-2:#101019;        /* тёмная карточка/панель */
  --ink-line:rgba(255,255,255,.10);
  --ink-fg:#F3F3F8;
  --ink-mut:rgba(243,243,248,.56);
  --ink-dim:rgba(243,243,248,.34);

  --paper:#F3F3F7;        /* светлый фон */
  --paper-2:#FFFFFF;      /* светлая карточка */
  --paper-line:rgba(10,10,16,.12);
  --paper-fg:#101018;
  --paper-mut:rgba(16,16,24,.58);
  --paper-dim:rgba(16,16,24,.38);

  --accent:#FFD23F;       /* жёлтый маркер — задаётся также из Tweaks */
  --accent-ink:#101018;   /* текст на акценте — тёмный (жёлтый светлый) */
  --yellow:#FFD23F;       /* второй основной — тёплый жёлтый маркер */

  /* — Типографика (переопределяется по направлению) — */
  --font-display:'Unbounded', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --h-weight:800;
  --h-tracking:-0.02em;
  --h-transform:none;
  --h-leading:0.98;
  --h-light:800;          /* вес «тонкой» части заголовка (для Редакции) */

  /* — Метрики — */
  --radius:18px;
  --radius-sm:11px;
  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-y:34px;
}

/* ---------- Направление 1: Дисплей (по умолчанию) ---------- */
:root[data-direction="display"]{
  --font-display:'Unbounded', system-ui, sans-serif;
  --h-weight:800; --h-tracking:-0.015em; --h-transform:none; --h-leading:0.96;
}
/* ---------- Направление 2: Инженер ---------- */
:root[data-direction="engineer"]{
  --font-display:'Onest', system-ui, sans-serif;
  --h-weight:800; --h-tracking:-0.03em; --h-transform:uppercase; --h-leading:0.92;
  --radius:6px; --radius-sm:5px;
}
/* ---------- Направление 3: Редакция ---------- */
:root[data-direction="editorial"]{
  --font-display:'Manrope', system-ui, sans-serif;
  --h-weight:280; --h-tracking:-0.025em; --h-transform:none; --h-leading:1.0;
  --h-light:280; --radius:26px; --radius-sm:16px;
}

/* ============================================================
   База
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}
body{
  margin:0; background:var(--paper); color:var(--paper-fg);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  font-weight:420; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
img{max-width:100%; display:block}
::selection{background:var(--accent); color:var(--accent-ink)}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--h-weight);
  letter-spacing:var(--h-tracking);
  line-height:var(--h-leading);
  text-transform:var(--h-transform);
  margin:0; text-wrap:balance;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}

.kicker{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* акцентное слово */
.accentword{color:var(--accent)}
:root[data-direction="editorial"] .accentword{font-weight:760}

/* ============================================================
   Pixel-menu — пиксельный «компьютер» по центру сверху.
   Клик по иконке → панель выезжает вбок и открывает навигацию.
   Экранчик компьютера показывает 3 равномерно расставленных пикселя.
   ============================================================ */
.pixmenu{
  position:fixed; z-index:100; top:18px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
/* появление меню — fade (ведёт JS через inline-opacity; здесь прячем до старта) */
@media (prefers-reduced-motion:no-preference){
  :root.wm-armed:not([data-motion="off"]) .pixmenu{opacity:0}
}

/* Иконка-кнопка */
.pixmenu-btn{
  width:48px; height:48px; flex:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-fg); color:var(--paper-2);
  border:none; border-radius:13px; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(10,10,16,.5);
  transition:background .3s var(--ease), color .3s var(--ease), border-radius .45s var(--ease);
}
/* На самом верху страницы меню раскрыто, а иконка-кнопка скрыта; при скролле
   иконка появляется, меню сворачивается (логику ведёт main.js).
   Прячем мгновенно (без opacity-перехода): в предпросмотре CSS-переходы
   могут «замирать», поэтому не полагаемся на них. */
.pixmenu.at-top .pixmenu-btn{position:absolute; top:0; opacity:0; transform:translateY(-8px) scale(.85); pointer-events:none}
.pixmenu-btn svg{width:27px; height:27px; display:block; shape-rendering:crispEdges}
.pixmenu-btn:active{transform:scale(.96)}
/* открыто: «монитор включается» — корпус жёлтый, экран тёмный (второй цвет — жёлтый) */
.pixmenu.open .pixmenu-btn{background:var(--yellow); color:var(--paper-fg); border-radius:13px 13px 4px 4px}
.pixmenu-screen{fill:var(--yellow); transition:fill .35s var(--ease)}
.pixmenu.open .pixmenu-screen{fill:var(--paper-fg)}
.pixmenu-px{fill:var(--paper-fg); transition:fill .35s var(--ease)}
.pixmenu.open .pixmenu-px{fill:var(--yellow)}
@keyframes px-blink{0%,80%{opacity:1} 90%{opacity:.25} 100%{opacity:1}}

/* Выпадающая панель — открывается ВНИЗ; высоту анимирует JS */
.pixmenu-content{
  height:0; opacity:0; overflow:hidden; pointer-events:none;
  display:block;
  border-radius:14px;
  box-shadow:0 16px 34px -16px rgba(10,10,16,.45);
  transition:height .5s var(--ease), opacity .35s var(--ease);
}
.pixmenu.open .pixmenu-content{opacity:1; pointer-events:auto}
.pixmenu-inner{
  flex:none;
  display:flex; align-items:stretch;
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:14px;
}
.pixmenu-nav{display:flex; flex-direction:row; align-items:center; gap:2px; padding:6px 7px; white-space:nowrap}
.pixmenu-nav a{
  padding:10px 15px; font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; text-align:center; color:var(--paper-fg); border-radius:9px;
  opacity:.66; transition:opacity .2s, background .2s, color .2s, transform .4s var(--ease);
}
/* ссылки появляются ОДНОВРЕМЕННО (без каскада) */
.pixmenu-nav a{transform:translateY(-8px)}
.pixmenu.open .pixmenu-nav a{transform:none}
.pixmenu-nav a:hover{opacity:1; background:color-mix(in oklab,var(--paper-fg) 7%, transparent); transition-delay:0s}
.pixmenu-nav a.cta{opacity:1; background:var(--yellow); color:var(--paper-fg)}
.pixmenu-nav a.cta:hover{filter:brightness(1.04)}

/* Подменю «Услуги» — выпадает из-под панели (вне overflow панели) */
.pixmenu-sub{
  position:absolute; top:100%; left:0; margin-top:9px;
  display:flex; flex-direction:column; gap:2px;
  min-width:248px; padding:6px;
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:14px; box-shadow:0 16px 34px -16px rgba(10,10,16,.45);
  opacity:0; transform:translateY(-7px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
  z-index:101;
}
/* мостик для курсора между панелью и подменю — чтобы ховер не прерывался */
.pixmenu-sub::before{content:""; position:absolute; left:0; right:0; top:-11px; height:11px}
.pixmenu-sub.show{opacity:1; transform:none; pointer-events:auto}
.pixmenu-sub a{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:9px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--paper-fg); text-decoration:none; opacity:.78;
  transition:opacity .2s, background .2s;
}
.pixmenu-sub a:hover{opacity:1; background:color-mix(in oklab,var(--paper-fg) 7%, transparent)}
.pixmenu-sub .ix{font-family:var(--font-mono); font-size:11px; font-weight:500; opacity:.5}
/* текущая страница услуги — подсвечена в подменю */
.pixmenu-sub a.is-current{opacity:1; background:color-mix(in oklab,var(--paper-fg) 6%, transparent)}
.pixmenu-sub a.is-current .ix{opacity:1; color:var(--paper-fg); background:var(--yellow); border-radius:4px; padding:2px 4px}

/* «Услуги» — пункт с подменю: стрелка-индикатор */
#pixServices{display:inline-flex; align-items:center; gap:6px}
.pixmenu-caret{width:10px; height:10px; flex:none; transition:transform .25s var(--ease)}
#pixServices[aria-expanded="true"] .pixmenu-caret{transform:rotate(180deg)}

/* ============================================================
   HERO  (тёмная секция)
   ============================================================ */
.hero{
  position:relative; background:var(--paper); color:var(--paper-fg);
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(84px,10vh,140px) clamp(14px,2.5vw,36px) clamp(40px,8vh,90px);
  /* +0.13·F компенсация: бокс букв ужат (0.78→0.52em), но «систм» и отступы
     сверху/снизу остаются на прежнем уровне. --wm-comp задаёт JS (fitWordmark). */
  padding-top:calc(clamp(84px,10vh,140px) + var(--wm-comp,0px));
  overflow:hidden; isolation:isolate;
}
/* фон-волна из точек (Three.js, dotted-surface.js) */
.hero-dots{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* волна растворяется к низу — её не «срезает» следующая секция */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
}
.hero-dots canvas{display:block}
.hero-stage{position:relative; z-index:2; width:100%}
/* Подпись под вордмарком — по центру, того же цвета, что «систм»,
   с жёлтым маркер-акцентом на ключевом слове. Появляется после посадки слова. */
.hero-tag{
  margin:calc(clamp(12px,2.4vh,28px) + var(--wm-comp,0px)) auto 0;
  text-align:center; max-width:30ch; min-height:2.64em;
  font-family:var(--font-body);
  font-size:clamp(15px,1.7vw,22px); font-weight:430; line-height:1.32;
  letter-spacing:-0.01em; color:var(--paper-fg);
  text-wrap:balance;
}
/* две фиксированные строки: скрэмбл не может изменить переносы — строки лишь слегка «дышат» по ширине */
.hero-tag .ht-line{display:block; white-space:nowrap}
.hero-tag mark{
  background:var(--yellow); color:var(--paper-fg);
  padding:0.04em 0.22em; margin:0 -0.04em; border-radius:4px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
:root[data-direction="engineer"] .hero-tag{font-family:var(--font-mono); letter-spacing:0}
/* CTA под подписью */
.hero-cta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:14px 22px; margin-top:clamp(18px,2.6vh,30px);
}
.hero-cta .btn-ghost{color:var(--paper-fg)}
/* первое появление CTA: видимое состояние — база; прячем только при включённом движении до сигнала JS (.shown) */
@media (prefers-reduced-motion:no-preference){
  :root.wm-armed:not([data-motion="off"]) .hero-cta:not(.shown){opacity:0; transform:translateY(12px)}
}
/* появление ведёт JS (rAF + scramble): пока вордмарк «садится» — подпись скрыта.
   Скрываем синхронно через .wm-armed; показ — инлайн-opacity из main.js
   (CSS-анимации в предпросмотре могут не проигрываться, поэтому не полагаемся на них). */
@media (prefers-reduced-motion:no-preference){
  :root.wm-armed:not([data-motion="off"]) .hero-tag:not(.shown){opacity:0}
}
.hero-glow{
  position:absolute; z-index:0; top:-34%; left:50%; translate:-50% 0;
  width:min(1300px,135vw); aspect-ratio:1/1; pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    color-mix(in oklab,var(--accent) 58%, transparent) 0%,
    color-mix(in oklab,var(--accent) 13%, transparent) 34%, transparent 62%);
  filter:blur(22px); opacity:.5;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);
}
/* ===== Вордмарк — точечный дисплей-шрифт (OffBit DotBold) ==========
   Полноширинный: буквы стоят встык и заполняют всю ширину без полей по
   краям и без зазоров между собой. Точный «фит по ширине» подбирает JS
   (fitWordmark) — font-size такой, чтобы слово занимало всю ширину.
   Высота блока обрезана по буквам (line-height у букв = высоте глифа). */
.wm{
  position:relative; z-index:60;
  display:block; width:100%; margin:0; padding:0; text-align:center;
  overflow:visible; user-select:none; line-height:0;
}
.wm-inner{
  display:inline-flex; align-items:flex-end; white-space:nowrap;
  font-size:18vw; /* стартовое значение; JS уточняет под ширину экрана */
}
/* Бокс буквы обрезан ровно по высоте рисунка глифа (ink). У OffBit DotBold
   рисунок идёт от 0.485em над бейзлайном до самого бейзлайна (без нижних
   выносных). Внутри line-box (1em) пустое место: 0.265em сверху и 0.25em снизу.
   Поэтому: бокс = 0.485em и обрезаем, а глиф поднимаем на 0.265em вверх. */
.wm-letter{
  display:flex; align-items:center; justify-content:center;
  line-height:0; overflow:visible; margin-inline:0.04em;
  will-change:transform;
}
.wm-g{
  display:block;
  /* Бокс буквы (.wm-letter, line-height 0.531em) = высоте рисунка глифа, но
     line-box ставит ink ниже центра → дотягиваем глиф вверх, чтобы верхний ряд
     точек касался верха бокса, а нижний — низа. Значение подобрано пиксельно. */
  transform:translateY(-0.028em);
  font-family:'Handjet', OffBit, var(--font-display);
  font-weight:700; font-size:1em; letter-spacing:0; line-height:0.531;
  font-variation-settings:'wght' 700;
  color:var(--paper-fg);
}
/* вход ведёт JS (пружины из main.js): буквы стартуют за верхним краем экрана
   → влетают вниз на свои места. Заранее уводим их вверх через .wm-armed,
   чтобы не было вспышки финала до старта скрипта. */
@media (prefers-reduced-motion: no-preference){
  :root.wm-armed:not([data-motion="off"]) .wm-letter{ transform:translateY(-100vh); }
}
:root[data-direction="editorial"] .wm-g{font-weight:700}

/* микро-таймлайн */
.timeline{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
  margin-top:38px; font-family:var(--font-mono); font-size:13.5px;
  color:var(--ink-fg);
}
.timeline .step{
  display:inline-flex; align-items:baseline; gap:9px;
  padding:9px 16px; border:1px solid var(--ink-line); border-radius:999px;
  background:color-mix(in oklab,var(--ink-fg) 4%,transparent);
}
.timeline .step b{font-weight:600; letter-spacing:.02em}
.timeline .step .t{color:var(--accent); font-weight:600}
.timeline .arrow{color:var(--ink-dim); font-size:16px}

/* CTA-блок в hero */
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:46px}
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:none; font-weight:600; transition:transform .25s var(--ease), filter .25s, box-shadow .3s;
}
.btn-primary{
  padding:17px 28px; border-radius:999px; font-size:16px;
  background:var(--accent); color:var(--accent-ink);
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 16px 38px -10px color-mix(in oklab,var(--accent) 70%,transparent)}
.btn-primary .ar{transition:transform .3s var(--ease)}
.btn-primary:hover .ar{transform:translate(4px,-4px)}
.btn-ghost{
  background:transparent; color:inherit; font-size:15.5px; padding:6px 2px;
  border-bottom:1.5px solid currentColor; border-radius:0;
}
.btn-ghost{opacity:.8}
.btn-ghost:hover{opacity:1; gap:14px}
.hero .btn-ghost .ar{transition:transform .3s var(--ease)}
.hero .btn-ghost:hover .ar{transform:translateX(4px)}

/* ============================================================
   Marquee (кинетическая строка)
   ============================================================ */
.marquee{
  background:var(--ink); color:var(--ink-fg);
  border-block:1px solid var(--ink-line);
  padding:22px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{display:inline-flex; gap:0; will-change:transform; animation:scroll-l 38s linear infinite}
.marquee.rev .marquee-track{animation-name:scroll-r}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .item{
  display:inline-flex; align-items:center; gap:26px; padding-inline:26px;
  font-family:var(--font-display); font-weight:var(--h-weight);
  font-size:clamp(22px,3vw,40px); letter-spacing:var(--h-tracking);
  text-transform:var(--h-transform);
}
.marquee .item .sep{color:var(--accent); font-size:.7em}
:root[data-direction="editorial"] .marquee .item{font-weight:420}
@keyframes scroll-l{to{transform:translateX(-50%)}}
@keyframes scroll-r{from{transform:translateX(-50%)} to{transform:translateX(0)}}

/* ============================================================
   Светлые секции — общее
   ============================================================ */
.section{padding:clamp(80px,11vw,150px) 0; background:var(--paper); color:var(--paper-fg)}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:14px; color:var(--paper-fg)}
.sec-head .idx{font-family:var(--font-mono); font-size:13px; letter-spacing:.1em;
  background:var(--yellow); color:var(--paper-fg); padding:3px 8px; border-radius:6px}
.sec-head .label{font-family:var(--font-mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-mut)}

/* — Что делаем: леджер из 4 действий на пунктирных линиях + пиксельные глифы — */
.wwd{background:#F7F3F5; overflow:hidden}
.wwd-head{
  margin-top:clamp(18px,3vw,36px);
  display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); max-width:820px;
}
.wwd-label{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mut);
}
.wwd-label::before{
  content:'//'; color:#101018; font-weight:700;
  background:#FFD23F; padding:0.05em 0.3em; margin-right:0.4em; border-radius:0.12em;
}
.wwd-lead{
  margin:0; font-family:var(--font-display); font-weight:var(--h-weight);
  letter-spacing:var(--h-tracking); text-transform:var(--h-transform);
  font-size:clamp(27px,3.8vw,52px); line-height:1.04; text-wrap:balance;
  color:var(--paper-fg);
}
.wwd-lead mark{
  background:var(--yellow); color:var(--paper-fg);
  padding:0.04em 0.14em; margin:-0.04em -0.02em; border-radius:0.1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* поток из 4 экранов */
.wwd-flow{
  list-style:none; margin:clamp(34px,5vw,66px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,40px);
}
.wwd-step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(16px,1.5vw,22px)}

/* пиксельный глиф 8×8 — прямо на фоне; ячейки строит wwd.js */
.wwd-px{
  position:relative;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  gap:clamp(2px,0.3vw,4px);
  width:clamp(62px,7vw,92px); aspect-ratio:1/1;
}
.wwd-px i{
  display:block; background:var(--paper-fg);
  transform:scale(0);
  transition:transform .5s var(--ease), background .3s;
}
.wwd-px i.y{background:var(--yellow)}
.wwd-step.in .wwd-px i{transform:scale(1)}
.wwd-px.out i{transform:scale(0) !important; transition-duration:.15s}
.wwd-step:hover .wwd-px i{background:var(--yellow)}

/* подпись шага */
.wwd-meta{display:flex; flex-direction:column; align-items:center; gap:6px}
.wwd-num{
  font-family:'Handjet', OffBit, var(--font-mono);
  font-weight:700; font-variation-settings:'wght' 700;
  font-size:clamp(28px,3vw,42px); line-height:.78;
  color:var(--paper-dim); user-select:none; transition:color .3s;
}
.wwd-step:hover .wwd-num{color:var(--paper-fg)}
.wwd-act{
  margin:2px 0 0;
  font-family:var(--font-display); font-weight:var(--h-weight);
  letter-spacing:var(--h-tracking); text-transform:var(--h-transform);
  font-size:clamp(19px,1.55vw,25px); line-height:1.12; text-wrap:balance;
  color:var(--paper-fg);
}
.wwd-act mark{
  background:var(--yellow); color:var(--paper-fg);
  padding:0.04em 0.14em; margin:-0.04em -0.02em; border-radius:0.1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.wwd-note{
  margin:0; font-family:var(--font-body); font-weight:420;
  font-size:clamp(14px,1vw,15.5px); line-height:1.5;
  letter-spacing:-0.005em; color:var(--paper-mut); max-width:32ch;
}
:root[data-motion="off"] .wwd-px i{transform:scale(1) !important; transition:none}
@media (prefers-reduced-motion:reduce){
  .wwd-px i{transform:scale(1); transition:none}
}

/* — Услуги — */
.services{margin-top:48px; border-top:1px solid var(--paper-line)}
.svc{
  position:relative; display:grid; grid-template-columns:88px 1fr auto;
  gap:clamp(16px,3vw,48px); align-items:center;
  padding:clamp(28px,3.4vw,46px) 0; border-bottom:1px solid var(--paper-line);
  cursor:pointer; transition:color .3s; isolation:isolate;
}
.svc::before{
  content:""; position:absolute; inset:0 calc(-1*var(--gutter)); z-index:-1;
  background:var(--ink); border-radius:0;
  transform:scaleY(0); transform-origin:bottom; opacity:0;
  transition:transform .45s var(--ease), opacity .35s;
}
.svc:hover{color:var(--ink-fg)}
.svc:hover::before{transform:scaleY(1); opacity:1}
.svc-idx{font-family:var(--font-mono); font-size:14px; color:var(--paper-mut); letter-spacing:.08em; transition:color .3s}
.svc:hover .svc-idx{color:var(--yellow)}
.svc-main{min-width:0}
.svc h3{font-size:clamp(24px,3.2vw,42px); margin-bottom:0; transition:transform .4s var(--ease)}
.svc-desc{
  margin-top:0; max-height:0; opacity:0; overflow:hidden;
  font-size:clamp(15px,1.3vw,17.5px); line-height:1.55; max-width:62ch;
  color:var(--ink-mut);
  transition:max-height .5s var(--ease), opacity .4s, margin-top .4s var(--ease);
}
.svc:hover .svc-desc{max-height:120px; opacity:1; margin-top:14px}
.svc:hover h3{transform:translateX(8px)}
.svc-go{
  flex-shrink:0; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:var(--paper-fg);
  border:1px solid var(--paper-line); transition:all .35s var(--ease);
}
.svc:hover .svc-go{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:rotate(0) scale(1.04)}
.svc-go svg{width:22px; height:22px; transition:transform .35s var(--ease)}
.svc:hover .svc-go svg{transform:translate(2px,-2px)}
:root[data-direction="engineer"] .svc::before{inset:0 calc(-1*var(--gutter))}

/* — Услуги: интерактивная паутина —
   Canvas рисует точечные нити (эхо dot-волны hero), поверх — DOM-узлы:
   хаб «систм», 4 услуги, спутники-теги. Логика в services-web.js. */
.svcweb{
  display:none; position:relative;
  height:clamp(580px, 82vh, 860px); margin-top:26px;
  overflow:visible; touch-action:pan-y;
}
@media (min-width:761px){
  .svcweb-js .svcweb{display:block}
  .svcweb-js .svcweb-fallback{display:none}
}
.svcweb-canvas{position:absolute; left:0; top:0; pointer-events:none}

/* узлы — общее */
.wn{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  user-select:none; touch-action:none; will-change:transform;
  opacity:0; transition:opacity .45s var(--ease);
}
.wn.on{opacity:1}
.wn.grab{cursor:grabbing}
/* раскрыта одна услуга — остальная паутина приглушается */
.svcweb.has-open .wn.on:not(.lit):not(.open):not(.wn-dot){opacity:.3}

/* хаб — «систм» точечным дисплей-шрифтом, тёмный чип с жёлтым словом */
.wn-hub{
  z-index:2; cursor:grab;
  background:var(--paper-fg); color:var(--yellow);
  border-radius:15px; padding:9px 17px 13px;
  font-family:'Handjet', OffBit, var(--font-display);
  font-weight:700; font-variation-settings:'wght' 700;
  font-size:36px; line-height:.9; letter-spacing:.01em;
  box-shadow:0 16px 34px -16px rgba(10,10,16,.55);
}

/* узел-услуга */
.wn-svc{
  z-index:3; cursor:pointer;
  width:max-content; max-width:300px;
  background:var(--paper-2); border:1px solid var(--paper-line); border-radius:14px;
  padding:15px 19px 16px;
  box-shadow:0 12px 28px -20px rgba(10,10,16,.4);
  transition:opacity .45s var(--ease), border-color .25s, box-shadow .3s;
}
.wn-svc:hover{border-color:rgba(10,10,16,.34)}
.wn-svc:focus-visible{outline:2px solid var(--paper-fg); outline-offset:3px}
.wn-idx{
  display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.08em; background:var(--yellow); color:var(--paper-fg);
  padding:2px 7px; border-radius:5px;
}
.wn-title{font-size:17.5px; line-height:1.18; margin-top:9px}
/* подсказка кликабельности — в правом верхнем углу свёрнутого узла */
.wn-open{
  position:absolute; top:11px; right:13px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--paper-mut); text-decoration:none; cursor:pointer;
  transition:color .25s var(--ease), gap .25s var(--ease);
}
.wn-open-ar{
  display:inline-grid; place-items:center;
  width:17px; height:17px; border-radius:5px;
  background:var(--yellow); color:var(--paper-fg);
  font-size:11px; line-height:1;
  transition:transform .25s var(--ease);
}
.wn-svc:hover .wn-open,
.wn-svc:focus-visible .wn-open{color:var(--paper-fg); gap:7px}
.wn-svc:hover .wn-open-ar{transform:translate(1px,-1px)}
.wn-body{display:none}
.wn-x{
  display:none; position:absolute; top:9px; right:9px;
  width:27px; height:27px; place-items:center; padding:0;
  background:transparent; border:none; border-radius:8px; cursor:pointer;
  color:var(--paper-mut); font-size:13px; line-height:1;
}
.wn-x:hover{background:rgba(10,10,16,.07); color:var(--paper-fg)}
/* раскрытая карточка */
.wn-svc.open{
  z-index:7; cursor:default; width:min(390px,84vw); max-width:none;
  border-color:rgba(10,10,16,.3);
  box-shadow:0 28px 64px -26px rgba(10,10,16,.45);
}
.wn-svc.open .wn-body{display:block; margin-top:12px; user-select:text; cursor:auto}
.wn-svc.open .wn-open{display:none}
.wn-svc.open .wn-x{display:grid}
.wn-body p{margin:0; font-size:14.5px; line-height:1.55; color:var(--paper-mut)}
.wn-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  color:var(--paper-fg); border-bottom:1.5px solid currentColor; padding-bottom:2px;
  text-decoration:none;
  transition:gap .25s var(--ease);
}
.wn-link:hover{gap:12px}

/* спутник-тег */
.wn-sat{
  z-index:1; cursor:grab;
  font-family:var(--font-mono); font-size:12px; white-space:nowrap;
  padding:7px 12px; border:1px solid var(--paper-line); border-radius:999px;
  background:var(--paper); color:var(--paper-mut);
  transition:opacity .45s var(--ease), background .25s, border-color .25s, color .25s;
}
.wn-sat.lit{background:var(--yellow); border-color:var(--yellow); color:var(--paper-fg)}

/* сабноды — крошечные полупрозрачные точки: паутина уходит в бесконечность */
.wn-dot{
  z-index:0; pointer-events:none; border-radius:50%;
  background:var(--paper-fg);
}
.wn-dot.on{opacity:var(--o,.3)}
.wn-dot.on.lit{opacity:min(1, calc(0.22 + var(--o,.3) * 2.4)); background:var(--yellow)}
.svcweb.has-open .wn-dot.on:not(.lit){opacity:calc(var(--o,.3) * .45)}

/* заголовок секции «// УСЛУГИ» — по центру сверху, над паутиной */
.svcweb-head{
  position:relative; z-index:3; pointer-events:none;
  margin:0; padding-top:clamp(28px, 6vh, 64px);
  text-align:center;
  font-family:var(--font-mono);
  font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mut);
}
.svcweb-head::before{
  content:'//'; color:#101018; font-weight:700;
  background:#FFD23F; padding:0.05em 0.3em; margin-right:0.4em; border-radius:0.12em;
}
.svcweb-head.reveal.in{opacity:1}

/* fallback: мобайл и no-JS — обычные карточки */
.svcweb-fallback{margin-top:40px; display:grid; gap:14px}
.svcw-card{
  background:var(--paper-2); border:1px solid var(--paper-line);
  border-radius:var(--radius-sm); padding:24px 22px;
}
.svcw-idx{
  display:inline-block; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.08em; background:var(--yellow); color:var(--paper-fg);
  padding:3px 8px; border-radius:6px;
}
.svcw-card h3{font-size:clamp(21px,2.6vw,28px); margin:14px 0 10px}
.svcw-card p{margin:0; color:var(--paper-mut); font-size:15.5px; line-height:1.55; max-width:62ch}
.svcw-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.svcw-tag{
  font-family:var(--font-mono); font-size:12px; padding:6px 11px;
  border:1px solid var(--paper-line); border-radius:999px; color:var(--paper-mut);
}
/* кнопка-ссылка «Открыть» на карточках услуг (мобайл) */
.svcw-open{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--paper-fg);
  transition:gap .25s var(--ease);
}
.svcw-open .ar{
  display:inline-grid; place-items:center; width:24px; height:24px;
  border-radius:7px; background:var(--yellow); color:var(--paper-fg);
  font-size:13px; line-height:1;
}
.svcw-open:active{gap:12px}

/* — Как мы работаем: «1 пиксель = 1 день» —
   Слева — шаги с глаголами Handjet и полосами пикселей-дней; справа —
   липкий пиксельный монитор (эхо иконки меню): по мере скролла дни-пиксели
   падают в экран с физикой (гравитация, отскок, осыпание горки) и собираются
   в кучу: 25 пикселей = 25 дней до запуска. Физику и счёт ведёт process.js. */
/* Прокручиваемый пин: stage прилипает на весь экран, монитор стоит по центру
   правой половины, шаги сменяют друг друга по одному с fade (соседние скрыты).
   Высоту скролла задаёт --seg на шаг (через .armed). Раскладку ведёт process.js. */
.proc3{
  --seg:118vh;                /* длина прокрутки на один шаг (пауза на чтение) */
  margin-top:clamp(40px,5vw,64px);
}
.proc3.armed{height:calc(var(--seg) * 4 + 100vh)}  /* 4 шага + экран пина */

.proc3-stage{
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,5vw,84px); align-items:start;
}
/* фон-экран секции: одно дисплейное поле на всю ширину — точечная сетка
   плюс те же пиксели-дни, что копятся в мониторе (рисует process.js) */
.proc3-bg{
  position:absolute; top:0;
  left:50%; width:100vw; height:100%; transform:translateX(-50%);
  z-index:0; pointer-events:none; display:block;
}
.proc3-steps, .proc3-side{position:relative; z-index:1}
.proc3.armed .proc3-stage{
  position:sticky; top:0; height:100vh; align-items:stretch;
}

/* левая колонка — шаги */
.proc3-steps{
  grid-column:1; grid-row:1;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(64px,9vw,128px);
}
.proc3.armed .proc3-steps{
  position:relative; height:100%; display:block; gap:0;
}
.proc3-step{position:relative}
/* в пине каждый шаг занимает весь экран и центрируется; видимость ведёт JS */
.proc3.armed .proc3-step{
  position:absolute; inset:0; margin:0;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; will-change:opacity, transform;
}
.proc3-head{display:flex; align-items:baseline; column-gap:20px; row-gap:10px; flex-wrap:wrap}
/* глагол — тем же точечным дисплей-шрифтом, что и «систм» */
.proc3-title{
  font-family:'Handjet', OffBit, var(--font-display);
  font-weight:700; font-variation-settings:'wght' 700;
  font-size:clamp(46px,6.5vw,96px); line-height:.85; letter-spacing:.015em;
  text-transform:none; color:var(--paper-fg);
}
.proc3-title .l{
  display:inline-block;
  transition:transform .35s var(--ease);
  transition-delay:calc(var(--i) * 22ms);
}
.proc3-step:hover .proc3-title .l{transform:translateY(-6px)}  /* волна по буквам */
/* пока шаг не проявился — буквы погашены; вспышку-проявление ведёт JS
   (CSS-анимации в предпросмотре «замирают», поэтому не полагаемся на них) */
.proc3.armed .proc3-step:not(.on) .proc3-title .l{opacity:0}
.proc3-dur{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.04em; background:var(--yellow); color:var(--paper-fg);
  padding:5px 10px; border-radius:7px; white-space:nowrap;
}
/* полоса длительности: пиксели-дни (строит process.js); .lit — день наступил
   и его пиксель уже упал в монитор */
.proc3-bar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px; margin-top:clamp(14px,2vw,22px); min-height:15px}
.proc3-bar i{
  width:15px; height:15px; flex:none;
  border:1.5px solid rgba(16,16,24,.28); background:transparent;
  transition:background .25s, border-color .25s;
}
.proc3-bar i.lit{background:var(--yellow); border-color:var(--yellow)}
.proc3-step:hover .proc3-bar i.lit{animation:px-blink 1.6s steps(1) infinite; animation-delay:calc(var(--i)*.12s)}
.proc3-step p{
  margin:clamp(12px,1.8vw,20px) 0 0; max-width:54ch;
  font-size:clamp(15.5px,1.5vw,18px); line-height:1.55; color:var(--paper-mut);
}

/* — монитор — стоит по центру правой половины */
.proc3-side{grid-column:2; grid-row:1; display:flex; flex-direction:column; justify-content:center}
.proc3-mon{
  position:relative;
  background:var(--paper-fg); border-radius:18px;
  padding:14px 14px 30px;
  box-shadow:0 30px 70px -34px rgba(10,10,16,.55);
}
.proc3-screen{
  position:relative; overflow:hidden;
  background:var(--ink); border-radius:10px;
  aspect-ratio:13/9;
  /* фоновая сетка из точек — поле дисплея */
  background-image:radial-gradient(rgba(243,243,248,.08) 1px, transparent 1.3px);
  background-size:18px 18px;
}
.proc3-screen canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* счётчик дней — точечным шрифтом, как на табло */
.proc3-count{position:absolute; top:12px; right:15px; display:flex; align-items:baseline; gap:9px; pointer-events:none}
.proc3-count b{
  font-family:'Handjet', OffBit, var(--font-mono);
  font-weight:700; font-variation-settings:'wght' 700;
  font-size:38px; line-height:1; color:var(--yellow);
}
.proc3-count i{font-style:normal; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-dim)}
/* LED на «подбородке»: мигает, пока пиксели падают; горит — когда все 25 на месте */
.proc3-led{
  position:absolute; right:19px; bottom:11px; width:8px; height:8px;
  background:rgba(243,243,248,.22); transition:background .3s;
}
.proc3-mon.run .proc3-led{background:var(--yellow); animation:px-blink 1.1s steps(1) infinite}
.proc3-mon.full .proc3-led{background:var(--yellow); animation:none}
/* ножка и основание — как у иконки в меню */
.proc3-leg{width:22px; height:26px; background:var(--paper-fg); margin:0 auto}
.proc3-base{width:150px; height:12px; background:var(--paper-fg); border-radius:0 0 6px 6px; margin:0 auto}
.proc3-caption{
  margin:20px 0 0; text-align:center;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--paper-mut);
}
.proc3-caption b{color:var(--paper-fg); font-weight:600}

/* — 3D-монитор (process-3d.js): blender-модель вместо CSS-корпуса.
   Класс .glb ставит скрипт после успешной загрузки модели; без него
   (нет WebGL / не загрузилась) остаётся прежний CSS-монитор. */
.proc3-glb{display:none}
#proc3.glb .proc3-side{position:relative}
#proc3.glb .proc3-glb{
  display:block; position:relative;
  width:min(100%, 620px); margin:0 auto;
  aspect-ratio:5/4;
}
.proc3-glb canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* CSS-монитор остаётся источником симуляции (его canvas — текстура экрана):
   фиксированный размер, спрятан за левым краем вьюпорта */
#proc3.glb .proc3-mon{position:absolute; left:-200vw; top:0; width:416px; box-shadow:none}
#proc3.glb .proc3-screen{aspect-ratio:129/100}  /* пропорция грани экрана модели */
#proc3.glb .proc3-leg, #proc3.glb .proc3-base{display:none}

@media (max-width:900px){
  .proc3-stage{grid-template-columns:1fr; gap:24px}
  .proc3.armed .proc3-stage{grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:stretch}
  /* монитор сверху над текстом, но чуть ниже прежнего */
  .proc3-side{grid-column:1; grid-row:1; justify-content:flex-start; margin-top:clamp(100px,20vh,200px)}
  .proc3-steps{grid-column:1; grid-row:2}
  .proc3.armed .proc3-steps{grid-row:2}
  .proc3-mon{max-width:320px; margin:0 auto; padding:10px 10px 22px; border-radius:14px}
  .proc3-screen{aspect-ratio:16/9; border-radius:8px}
  .proc3-count b{font-size:28px}
  .proc3-led{right:15px; bottom:8px; width:7px; height:7px}
  .proc3-leg, .proc3-base{display:none}
  .proc3-caption{margin-top:10px}
  #proc3.glb .proc3-glb{width:min(72vw, 310px)}
  .proc3-title{font-size:clamp(40px,12vw,64px)}
}

/* ============================================================
   CTA — тёмная секция
   ============================================================ */
.cta{position:relative; background:var(--ink); color:var(--ink-fg); overflow:hidden; isolation:isolate;
  padding:clamp(90px,12vw,160px) 0}
.cta-glow{position:absolute; z-index:0; inset:auto -10% -60% auto; right:-10%; width:min(800px,90vw);
  aspect-ratio:1; pointer-events:none; opacity:.5;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 55%,transparent),transparent 62%); filter:blur(10px)}
.cta .wrap{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center}
.cta h2{font-size:clamp(38px,7vw,104px); max-width:14ch}
.cta p{margin:26px 0 0; color:var(--ink-mut); font-size:clamp(16px,1.6vw,20px); max-width:44ch}
.cta .hero-actions{justify-content:center}

/* ============================================================
   Почему доступно — простой логический поток (why2).
   Три связанных шага: ai снимает рутину → время на проработку →
   решения дешевле без потери качества. Ключевые слова — жёлтым
   маркером; финальный узел потока подсвечен как вывод.
   ============================================================ */
.why2-grid{display:grid; grid-template-columns:1fr 0.82fr; gap:clamp(34px,5vw,80px);
  align-items:center; margin-top:6px}
.why2 h2{font-size:clamp(32px,4.8vw,62px); margin:0 0 clamp(16px,1.8vw,24px)}
.why2-col{display:flex; flex-direction:column}
.why2-kicker{display:block; margin-bottom:clamp(16px,2vw,22px); color:var(--paper-mut)}
/* большой самопереключающийся пиксельный глиф — строит why-glyph.js */
.why2-art{display:flex; align-items:center; justify-content:center}
.why2-glyph{
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  gap:clamp(5px,0.7vw,9px);
  width:clamp(190px,25vw,330px); aspect-ratio:1/1;
}
.why2-glyph i{
  display:block; background:var(--paper-fg);
  transform:scale(0);
  transition:transform .5s var(--ease), background .3s;
}
.why2-glyph i.y{background:var(--yellow)}
.why2-glyph.in i{transform:scale(1)}
.why2-glyph.out i{transform:scale(0) !important; transition-duration:.15s}
:root[data-motion="off"] .why2-glyph i{transform:scale(1) !important; transition:none}
@media (prefers-reduced-motion:reduce){
  .why2-glyph i{transform:scale(1); transition:none}
}

/* текст под заголовком — плотным блоком, без лишних отступов */
.why2-body{display:flex; flex-direction:column; gap:clamp(9px,1vw,13px)}
.why2-body .why2-text{margin:0}
.why2-flow{list-style:none; margin:0; padding:0}
.why2-step{display:grid; grid-template-columns:auto 1fr; column-gap:clamp(18px,2vw,28px)}
.why2-rail{display:flex; flex-direction:column; align-items:center}
.why2-node{flex:none; width:15px; height:15px; margin-top:.42em; border-radius:50%;
  border:2px solid var(--paper-fg); background:var(--paper)}
.why2-line{flex:1; width:2px; margin-top:8px; background:var(--paper-line); border-radius:2px}
.why2-step.is-end .why2-node{background:var(--yellow); border-color:var(--yellow);
  box-shadow:0 0 0 5px color-mix(in oklab, var(--yellow) 26%, transparent)}
.why2-text{margin:0 0 clamp(26px,3.2vw,40px); font-size:clamp(17px,1.55vw,21px); line-height:1.62;
  color:var(--paper-fg); text-wrap:pretty}
.why2-step.is-end .why2-text{margin-bottom:0}
.why2-text mark{background:var(--yellow); color:var(--accent-ink);
  padding:.04em .26em; margin-inline:-.02em; border-radius:.16em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}

@media (max-width:860px){
  .why2-grid{grid-template-columns:1fr; gap:clamp(26px,7vw,40px)}
  .why2-art{order:-1; justify-content:flex-start}
  .why2-glyph{width:clamp(150px,42vw,210px)}
  .why2-text{font-size:clamp(16.5px,4.4vw,19px)}
}

/* ============================================================
   Кейсы — портфолио как стенка из CRT-мониторов.
   Каждый кейс «показан» на тёмном экране, который «включается» при
   наведении: проявляется развёртка (scan-line sweep), экран светлеет,
   загорается LED и номер канала (Handjet). Первый кейс — крупный
   (featured, экран слева + текст справа), затем ряд из двух карточек.
   ============================================================ */
.cases{background:#F7F3F5; overflow:hidden}
.cases-head{
  margin-top:clamp(8px,2vw,24px);
  display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); max-width:820px;
}
.cases-label{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mut);
}
.cases-label::before{
  content:'//'; color:#101018; font-weight:700;
  background:#FFD23F; padding:0.05em 0.3em; margin-right:0.4em; border-radius:0.12em;
}
.cases-lead{font-size:clamp(30px,4.6vw,58px); letter-spacing:-0.02em}
.cases-lead mark{
  background:var(--yellow); color:var(--accent-ink);
  padding:.02em .22em; margin-inline:-.02em; border-radius:.14em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

.cases-grid{
  margin-top:clamp(34px,5vw,64px);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,2.6vw,44px);
}

/* карточка */
.case-card{display:flex; flex-direction:column; gap:clamp(16px,1.6vw,24px)}
.case-card.is-featured{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1.18fr .82fr;
  gap:clamp(30px,4vw,64px); align-items:center;
}

/* экран-монитор */
.case-screen{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16 / 10; border-radius:var(--radius);
  background:
    radial-gradient(120% 130% at 50% 0%, #15151f 0%, #0A0A10 70%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px -34px rgba(10,10,16,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.case-card.is-featured .case-screen{aspect-ratio:16 / 11}
/* мягкая виньетка-свечение кинескопа */
.case-screen::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(110% 120% at 50% 42%, transparent 52%, rgba(10,10,16,.55) 100%);
}
/* развёртка — тонкие горизонтальные линии CRT */
.case-screen::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity:.5; transition:opacity .5s var(--ease);
}

/* плейсхолдер «нет сигнала» внутри экрана */
.case-ph{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,1.6vw,20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.case-ph-px{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:clamp(4px,0.5vw,7px); width:clamp(46px,5.5vw,70px); aspect-ratio:1/1;
}
.case-ph-px i{display:block; background:rgba(243,243,248,.16); border-radius:1px;
  transition:background .45s var(--ease)}
.case-ph-px i:nth-child(1),.case-ph-px i:nth-child(5),.case-ph-px i:nth-child(9){background:rgba(243,243,248,.3)}
.case-ph-txt{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .45s var(--ease);
}

/* номер канала и LED */
.case-ch{
  position:absolute; top:14px; left:16px; z-index:3;
  font-family:'Handjet', var(--font-mono); font-weight:700;
  font-size:clamp(18px,2vw,26px); letter-spacing:.08em;
  color:var(--ink-dim); transition:color .45s var(--ease);
}
.case-led{
  position:absolute; bottom:14px; right:16px; z-index:3;
  width:9px; height:9px; border-radius:50%;
  background:rgba(243,243,248,.18);
  box-shadow:0 0 0 0 rgba(255,210,63,0);
  transition:background .4s var(--ease), box-shadow .5s var(--ease);
}

/* sweep-полоса «включения» — едет сверху вниз на hover */
.case-scan{
  position:absolute; left:0; right:0; top:0; height:34%; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,210,63,0) 0%, rgba(255,210,63,.16) 60%, rgba(255,255,255,.34) 100%);
  opacity:0; transform:translateY(-120%);
}

/* — Включение монитора: hover/focus — */
@media (hover:hover){
  .case-card:hover .case-screen,
  .case-card:focus-within .case-screen{
    transform:translateY(-6px);
    border-color:rgba(255,210,63,.4);
    box-shadow:0 34px 70px -30px rgba(10,10,16,.7), 0 0 0 1px rgba(255,210,63,.18);
  }
}
.case-card:hover .case-screen::after,
.case-card:focus-within .case-screen::after{opacity:.85}
.case-card:hover .case-ph-px i,
.case-card:focus-within .case-ph-px i{background:rgba(255,210,63,.34)}
.case-card:hover .case-ph-px i:nth-child(1),
.case-card:hover .case-ph-px i:nth-child(5),
.case-card:hover .case-ph-px i:nth-child(9),
.case-card:focus-within .case-ph-px i:nth-child(1),
.case-card:focus-within .case-ph-px i:nth-child(5),
.case-card:focus-within .case-ph-px i:nth-child(9){background:var(--yellow)}
.case-card:hover .case-ph-txt,
.case-card:focus-within .case-ph-txt{color:var(--ink-mut)}
.case-card:hover .case-ch,
.case-card:focus-within .case-ch{color:var(--yellow)}
.case-card:hover .case-led,
.case-card:focus-within .case-led{
  background:var(--yellow); box-shadow:0 0 0 4px color-mix(in oklab, var(--yellow) 30%, transparent);
}
.case-card:hover .case-scan,
.case-card:focus-within .case-scan{animation:case-sweep .85s var(--ease) forwards}
@keyframes case-sweep{
  0%{opacity:0; transform:translateY(-120%)}
  18%{opacity:1}
  100%{opacity:0; transform:translateY(320%)}
}

/* текст карточки */
.case-body{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px,0.9vw,12px)}
.case-tagline{display:flex; align-items:center; gap:12px}
.case-num{
  font-family:'Handjet', var(--font-mono); font-weight:700;
  font-size:clamp(22px,2.4vw,34px); line-height:1; color:var(--paper-fg);
}
.case-kind{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-mut);
}
.case-title{
  font-size:clamp(22px,2.5vw,34px); margin:2px 0 0; letter-spacing:-0.02em;
  transition:color .3s var(--ease);
}
.case-card.is-featured .case-title{font-size:clamp(26px,3.4vw,46px)}
.case-card:hover .case-title,.case-card:focus-within .case-title{color:#000}
.case-desc{margin:0; color:var(--paper-mut); font-size:clamp(14.5px,1.1vw,16px); line-height:1.6; max-width:48ch}
.case-card.is-featured .case-desc{font-size:clamp(16px,1.3vw,19px); max-width:52ch}
.case-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.case-tag{
  font-family:var(--font-mono); font-size:12px; padding:6px 11px;
  border:1px solid var(--paper-line); border-radius:999px; color:var(--paper-mut);
}
.case-go{
  margin-top:clamp(6px,0.8vw,10px); display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.04em;
  color:var(--paper-fg); transition:gap .3s var(--ease), color .3s var(--ease);
}
.case-go .ar{transition:transform .3s var(--ease)}
.case-card:hover .case-go,.case-card:focus-within .case-go{gap:13px}
.case-card:hover .case-go .ar,.case-card:focus-within .case-go .ar{transform:translate(2px,-2px)}

/* движение выключено / reduced — без sweep, экран сразу читаемый */
:root[data-motion="off"] .case-scan{display:none}
@media (prefers-reduced-motion:reduce){
  .case-scan{display:none}
  .case-screen,.case-ph,.case-title,.case-go{transition:none}
}

@media (max-width:860px){
  .case-card.is-featured{grid-template-columns:1fr; gap:clamp(16px,4vw,24px)}
  .case-card.is-featured .case-screen{aspect-ratio:16 / 10}
}
@media (max-width:560px){
  .cases-grid{grid-template-columns:1fr; gap:clamp(28px,7vw,40px)}
}

/* ============================================================
   Контакты / Footer — светлая, как страница; большая
   пиксельная сетка «систм» с жёлтым следом курсора (foot-grid.js)
   ============================================================ */
.footer{background:var(--paper); color:var(--paper-fg); padding:clamp(70px,9vw,120px) 0 0; position:relative; overflow:hidden}
.foot-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:40px;
  padding:0 var(--gutter) clamp(40px,5vw,68px)}
.foot-links{display:flex; flex-direction:column; gap:14px}
.foot-links--left{text-align:left; align-items:flex-start}
.foot-links--right{text-align:right; align-items:flex-end}
.foot-links a{font-family:var(--font-mono); font-size:clamp(28px,5vw,64px); color:var(--paper-fg);
  display:inline-flex; align-items:center; gap:14px; transition:color .25s, gap .25s; line-height:1.05}
.foot-links--right a{justify-content:flex-end}
.foot-links a:hover{color:var(--accent-ink); gap:22px}
.foot-links a:hover span{color:inherit}
.foot-links .lbl{color:var(--paper-dim); font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.foot-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(40px,5vw,64px); padding-top:34px; border-top:1px solid var(--paper-line);
  font-family:var(--font-mono); font-size:12.5px; color:var(--paper-dim)}

/* — пиксельная сетка «систм» — во всю ширину, прижата к низу */
.foot-grid-wrap{width:100%; display:block}
.foot-grid{
  display:grid; gap:clamp(3px,0.5vw,7px); width:100%;
  touch-action:none; cursor:crosshair;
}
.foot-grid i{
  display:block; aspect-ratio:1/1; border-radius:1.5px;
  background:var(--paper-fg);
  transform:scale(.30); opacity:.14;
  transition:transform .6s var(--ease), opacity .6s var(--ease), background-color .6s var(--ease);
}
.foot-grid i.on{transform:scale(1); opacity:1}
.foot-grid i.lit{background:var(--yellow); transform:scale(1); opacity:1; transition:none}
:root[data-motion="off"] .foot-grid i{transition:none}
@media (max-width:680px){
  .foot-top{flex-direction:column; align-items:flex-start}
  .foot-links--right{text-align:left; align-items:flex-start}
  .foot-links--right a{justify-content:flex-start}
}

/* ============================================================
   CTA v2 — «хаос → система»: интерактивный тумблер
   Фон-canvas рисует cta-order.js; состояние секции — data-state.
   ============================================================ */
.cta2{
  position:relative; background:var(--ink); color:var(--ink-fg);
}
/* высокий трек: пока секция «закреплена», она держит весь экран, и где-то
   в середине прокрутки одним жестом проигрывается анимация хаос→система.
   Класс .armed ставит cta-order.js (живой режим). */
.cta2.armed{height:270vh}
.cta2-pin{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; display:grid; align-items:center;
  padding:clamp(120px,18vw,220px) 0;
}
.cta2.armed .cta2-pin{
  position:sticky; top:0; height:100vh; min-height:0; padding:0;
}
.cta2-canvas{position:absolute; inset:0; z-index:0; pointer-events:none}
.cta2-wrap{position:relative; z-index:2; width:100%}
.cta2-stack{display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 auto; max-width:840px}
.cta2-kicker{color:var(--ink-mut); margin-bottom:clamp(20px,3vw,30px)}

/* — заголовок: две реплики друг над другом, видна одна — */
.cta2-swap{display:grid; justify-items:center; width:100%; margin:0; font-size:clamp(34px,5.8vw,84px)}
.cta2-h{
  grid-area:1/1; display:block; max-width:14ch; text-wrap:balance;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.cta2-h.is-order{opacity:0; transform:translateY(20px); pointer-events:none}
.cta2[data-state="order"] .cta2-h.is-chaos{opacity:0; transform:translateY(-20px); pointer-events:none}
.cta2[data-state="order"] .cta2-h.is-order{opacity:1; transform:none; pointer-events:auto}

/* акцентное слово — точечный дисплей-шрифт (эхо вордмарка) */
.cta2-px{
  font-style:normal;
  font-family:'Handjet', OffBit, var(--font-display);
  font-weight:700; font-variation-settings:'wght' 700;
  font-size:1.18em; line-height:.8; letter-spacing:.03em;
}
.cta2-h.is-chaos .cta2-px{display:inline-block; color:var(--ink-fg); opacity:.95}
.cta2-h.is-order .cta2-px{color:var(--accent)}
:root[data-motion="on"] .cta2[data-state="chaos"] .cta2-h.is-chaos .cta2-px{
  animation:cta2-word-jit .9s steps(2) infinite;
}
@keyframes cta2-word-jit{
  0%,100%{transform:translate(0,0) rotate(-1.2deg)}
  50%{transform:translate(1px,-1px) rotate(1.2deg)}
}

/* — тумблер — */
.cta2-switch{
  display:flex; align-items:center; gap:20px;
  margin:clamp(32px,4.4vw,50px) 0 0; padding:10px 14px;
  background:none; border:0; cursor:pointer; color:var(--ink-fg);
  -webkit-tap-highlight-color:transparent;
}
.cta2-switch:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:14px}
.cta2-sw-label{
  font-family:var(--font-mono); font-size:13.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .35s;
}
.cta2[data-state="chaos"] .cta2-sw-label.is-chaos{color:var(--ink-fg)}
.cta2[data-state="order"] .cta2-sw-label.is-order{color:var(--accent)}
.cta2-sw-track{
  position:relative; display:block; flex:none;
  width:132px; height:58px; border-radius:13px;
  background:var(--ink-2); border:1px solid var(--ink-line);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.55);
}
/* точечная сетка внутри жёлоба — поле дисплея */
.cta2-sw-track::before{
  content:""; position:absolute; inset:7px; border-radius:8px; opacity:.5;
  background-image:radial-gradient(rgba(243,243,248,.22) 1.1px, transparent 1.7px);
  background-size:9px 9px; background-position:center;
}
.cta2-sw-knob{
  position:absolute; top:6px; left:6px; width:44px; height:44px; display:block;
  transition:transform .55s cubic-bezier(.6,-.28,.28,1.25);
}
.cta2[data-state="order"] .cta2-sw-knob{transform:translateX(74px)}
.cta2-sw-cap{
  display:grid; place-items:center; width:100%; height:100%; border-radius:9px;
  background:var(--accent);
  box-shadow:0 6px 18px -6px color-mix(in oklab,var(--accent) 70%,transparent), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:filter .25s;
}
.cta2-switch:hover .cta2-sw-cap{filter:brightness(1.08)}
/* 5 пикселей на шляпке = «систм» (эхо иконки меню) */
.cta2-sw-cap i{
  width:23px; height:3px;
  background-image:repeating-linear-gradient(90deg, var(--accent-ink) 0 3px, transparent 3px 5px);
}
/* в хаосе шляпка мелко дрожит */
:root[data-motion="on"] .cta2[data-state="chaos"] .cta2-sw-cap{animation:cta2-jit 1s steps(2) infinite}
@keyframes cta2-jit{
  0%,100%{transform:translate(0,0) rotate(-2.5deg)}
  33%{transform:translate(-1.5px,1px) rotate(2deg)}
  66%{transform:translate(1.5px,-1px) rotate(-1.5deg)}
}
@media (prefers-reduced-motion:reduce){
  .cta2-sw-cap, .cta2 .cta2-px{animation:none !important}
}

/* — подпись и кнопки — */
.cta2-sub{
  margin:clamp(28px,3.6vw,40px) 0 0; color:var(--ink-mut);
  font-size:clamp(15.5px,1.6vw,19px); max-width:46ch; text-wrap:pretty;
}
.cta2-actions{justify-content:center; margin-top:36px}

@media (max-width:680px){
  .cta2-switch{gap:14px}
  .cta2-sw-track{width:112px; height:52px}
  .cta2-sw-knob{width:40px; height:40px}
  .cta2[data-state="order"] .cta2-sw-knob{transform:translateX(58px)}
}

/* ============================================================
   Reveal-анимации
   ============================================================ */
.reveal{opacity:0; transform:translateY(var(--reveal-y)); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.reveal[data-d="6"]{transition-delay:.48s}

/* отключение анимаций (Tweaks: motion off / prefers-reduced-motion) */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  animation:none !important; transition:none !important;
}
:root[data-motion="off"] .reveal{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .hero-eyebrow .pulse{animation:none}
  /* статичный вордмарк: без пружин (буквы в покое из базовых стилей) */
  .wm-letter{transform:none !important}
  /* пиксельный таймлайн — статичен, всё включено (классы ставит process.js) */
  .proc3-title .l{animation:none !important; transition:none !important}
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:980px){
  .smeta-grid{grid-template-columns:1fr; gap:38px}
  .smeta-rig{justify-self:start}
}
@media (max-width:760px){
  /* чек — компактнее */
  .smeta-paper{font-size:12.5px; padding:22px 14px 12px}
  .sr-line{gap:7px}
  .smeta-stamp{font-size:11px; right:8px; bottom:50px; padding:7px 11px 8px}
  .sp-label{font-size:9.5px; letter-spacing:.1em}
}
@media (max-width:420px){
  .smeta-paper{font-size:11.5px}
}
@media (max-width:900px){
  /* поток «что делаем» — 2×2 */
  .wwd-flow{grid-template-columns:repeat(2,1fr); gap:clamp(22px,4vw,38px) clamp(22px,4vw,40px)}
}
@media (max-width:560px){
  /* поток «что делаем» — компактные строки */
  .wwd-flow{grid-template-columns:1fr; gap:0; margin-top:26px}
  .wwd-step{
    flex-direction:row; align-items:flex-start; text-align:left; gap:18px;
    padding:18px 0; border-top:2px dotted rgba(16,16,24,.28);
  }
  .wwd-step:last-child{border-bottom:2px dotted rgba(16,16,24,.28)}
  .wwd-px{flex:0 0 auto; width:54px}
  .wwd-meta{flex:1; min-width:0; align-items:flex-start; gap:4px}
  .wwd-num{font-size:24px}
  .wwd-act{font-size:clamp(18px,5vw,22px)}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav{display:none}
  /* hero выравниваем по высоте экрана — без пустоты снизу */
  .hero{
    min-height:100svh; justify-content:center;
    padding-top:clamp(96px,15vh,128px); padding-bottom:clamp(36px,9vh,72px);
  }
  /* меню не должно обрезаться на узком экране */
  .pixmenu{max-width:calc(100vw - 16px)}
  .pixmenu-content{max-width:calc(100vw - 16px)}
  .pixmenu-inner{max-width:100%}
  /* меню остаётся горизонтальным — просто уплотняем, чтобы влезло */
  .pixmenu-nav{flex-wrap:nowrap; gap:1px; padding:5px 5px}
  .pixmenu-nav a{padding:9px 9px; font-size:11px; letter-spacing:.02em}
  #pixServices{gap:4px}
  .pixmenu-sub{
    left:50%; transform:translate(-50%,-7px);
    min-width:0; width:max-content; max-width:calc(100vw - 16px);
  }
  .pixmenu-sub.show{transform:translateX(-50%)}
  .svc{grid-template-columns:44px 1fr auto; gap:14px}
  .svc-desc{max-height:none; opacity:1; margin-top:12px} /* на мобайле описания видны сразу */
  .svc h3{transform:none !important}
  .proc3-bar{gap:5px}
  .proc3-bar i{width:11px; height:11px}
  .foot-top{flex-direction:column; align-items:flex-start}
  .foot-links--right{text-align:left; align-items:flex-start}
  .foot-links--right a{justify-content:flex-start}
}