/**
 * ПРОТОТИП: брендовая главная + два направления (Разработка / Маркетинг).
 * План: plans/2026-07-17-brand-home-two-directions.md
 *
 * Подключается на главной, страницах направлений (-razrabotka / -marketing) и решений,
 * см. olprime_assets в functions.php. Ничего из home.css/style.css не переопределяет -
 * только новые классы и модификаторы, поэтому существующие страницы не задеваются.
 * Значения - из токенов :root (style.css). Паттерны - DESIGN-SYSTEM.md §4-§8.
 */

/* ---------- HERO: виджет направления «Разработка» ---------- */
/* Держит баланс с маркетинговым .gw--chart: без него первый экран читается
   как чисто рекламный. Встаёт на место бывшего .gw--price (home.css). */
.gw--stack {
  top: 38%; left: 0; width: 250px;
  animation-duration: 8.5s; animation-delay: -2s;
}
/* Чипы прототипа длиннее исходных («SEO»/«CRM») - на базовых позициях (home.css)
   они наезжают друг на друга и на виджет. Разводим scoped, только здесь. */
.home--brand .gchip--3 { bottom: 5%; right: 4%; }
.home--brand .gchip--4 { bottom: 6%; left: 6%; }
.gw__stack-title { font-size: 15px; font-weight: 700; color: #fff; margin-top: 10px; }
.gw__mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gw__mods span {
  padding: 5px 10px; border-radius: 8px; font-size: 12px; line-height: 1.2;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
}
/* бейдж-иконка в шапке виджета (в .gw--chart там текстовое «↑ рост») */
.gw--stack .gw__badge { display: inline-flex; }
.gw--stack .gw__badge svg { width: 15px; height: 15px; }
/* подпись под крупной цифрой - расшифровка, что за число */
.gw__cap--under { display: block; margin-top: 2px; }

/* ---------- HERO с фото (страницы направлений) ---------- */
/* Модификатор: базовый .hero__panel (home.css) не трогаем. */
.hero__panel--brand { align-items: center; }
.hero__eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.hero__eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}
/* Пропорция 3:2 = как у исходных фото: при stretch колонка становится почти квадратной
   и object-fit срезает людей по краям кадра. */
.hero__photo {
  position: relative; z-index: 2; align-self: center;
  aspect-ratio: 3 / 2; width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* фото на тёмной панели: лёгкое затемнение снизу, чтобы не спорило с текстом */
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,11,0) 55%, rgba(11,11,11,.35) 100%);
}

/* ---------- Капс-эйбрау секции (иерархия: платформа → решения → услуги) ---------- */
.sec-label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: 10px;
}
/* prime-dot перед лейблом - как у .mega__title / .nishes__glabel (§8) */
.sec-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}

/* ---------- РАЗВИЛКА В ПЕРВОМ ЭКРАНЕ ---------- */
/* Раньше выбор направления начинался на 900px и в фолд не попадал: главный сценарий
   страницы не был представлен там, где принимают решение. */
.hero__forks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fork {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-md); min-width: 260px; flex: 1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fork__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(229,97,33,.18); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.fork__icon svg { width: 20px; height: 20px; }
.fork__body { display: flex; flex-direction: column; gap: 2px; }
.fork__title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.fork__text { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.3; }
.fork__arrow { margin-left: auto; color: var(--brand); font-weight: 700; transition: transform .2s ease; }
.fork:hover { background: rgba(255,255,255,.1); border-color: rgba(229,97,33,.55); transform: translateY(-2px); }
.fork:hover .fork__icon { background: var(--brand); color: #fff; }
.fork:hover .fork__arrow { transform: translateX(4px); }

/* ---------- ЛОГОТИПЫ КЛИЕНТОВ ---------- */
.section--tight { padding-block: 40px; }
.logos__lead {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); text-align: center; margin-bottom: 20px;
}
/* --- Бегущая лента логотипов --- */
.logos-marquee {
  position: relative; overflow: hidden; margin-top: 6px;
  /* мягкое затухание по краям - лента «уезжает», а не обрывается */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track { display: flex; width: max-content; animation: logos-scroll 42s linear infinite; }
.logos-set { display: flex; align-items: center; }
/* дорожка = 2 набора; сдвиг на половину = ровно один набор → бесшовный цикл */
@keyframes logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.logos-marquee:hover .logos-track,
.logos-marquee:focus-within .logos-track { animation-play-state: paused; }

.logos__item {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding-inline: 30px;
}
/* Только grayscale + opacity, без brightness: у части логотипов фон залит белым
   (не прозрачный), и любое затемнение проявляет его серым прямоугольником. */
.logo {
  max-height: 56px; max-width: 190px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .5;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.logos__item:hover .logo { filter: none; opacity: 1; transform: scale(1.04); }

/* Стоп для тех, кто просил меньше движения (WCAG 2.2.2): лента замирает,
   дублирующий набор прячем, чтобы не было визуального повтора. */
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logos-set[aria-hidden="true"] { display: none; }
}

/* ---------- РАЗВИЛКА: ДВА НАПРАВЛЕНИЯ ---------- */
/* Карточки НАМЕРЕННО разные: зеркальная симметрия делала двери неразличимыми.
   dev - тёмная панель с модулями (Enterprise покупает систему),
   mkt - светлая карточка с фото (МСБ покупает команду и результат). */
/* Подводка под заголовком. Ширина 940px намеренно НЕ совпадает с колонкой сетки ниже:
   на 620px правый край вставал ровно по границе левой карточки, и текст читался
   как подпись к «Разработке», а не как подводка ко всей секции. */
.dirs__lead {
  max-width: 940px; margin: 16px 0 30px; font-size: 17px; line-height: 1.6; color: var(--ink-soft);
}
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.dir {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* «Разработка» - тёмная панель (§5) */
.dir--dev {
  background: radial-gradient(130% 130% at 12% 0%, #26262a 0%, #17171a 55%, #101012 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -26px rgba(var(--shadow-rgb), .3);
  isolation: isolate;
}
.dir--dev::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: .05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dir--dev::before {
  content: ""; position: absolute; width: 320px; height: 320px; z-index: -1;
  right: -110px; top: -120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(229,97,33,.38) 0%, rgba(229,97,33,0) 65%);
  filter: blur(20px);
}
/* «Маркетинг» - светлая карточка */
.dir--mkt {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 18px 40px -26px rgba(var(--shadow-rgb), .2);
}
/* 16:9, а не 3:2 исходника: при 3:2 фото добавляло светлой карточке ~430px, и рядом
   с тёмной (у неё фото нет) получалась лесенка. object-position держит головы в кадре. */
.dir__media { position: relative; aspect-ratio: 16 / 9; background: var(--mist); overflow: hidden; }
.dir__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  display: block; transition: transform .5s ease;
}
.dir:hover .dir__media img { transform: scale(1.04); }
.dir__body { padding: 30px 32px 32px; display: flex; flex-direction: column; flex: 1; }
/* строка-адресат: человек узнаёт себя, а не изучает список услуг */
.dir__aud { font-size: 13px; letter-spacing: .02em; margin-bottom: 10px; }
.dir--dev .dir__aud { color: rgba(255,255,255,.55); }
.dir--mkt .dir__aud { color: var(--ink-soft); }
.dir__title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.dir__title::after { content: "."; color: var(--brand); }
.dir--dev .dir__title a { color: #fff; }
.dir--mkt .dir__title a { color: var(--ink); }
/* card-overlay: ссылка на заголовке растягивается на всю карточку.
   Обёртка <a> вокруг всего блока давала анкор в 40+ слов (плохо для SEO и скринридера). */
.dir__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dir__text { margin-top: 10px; font-size: 15px; line-height: 1.55; }
.dir--dev .dir__text { color: rgba(255,255,255,.72); }
.dir--mkt .dir__text { color: var(--ink-soft); }
/* плитки модулей внутри тёмной карточки - предметность вместо портрета */
.dir__mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.dir--dev .pmod { padding: 7px 12px; font-size: 12.5px; }
.pmod--more { opacity: .6; }
.dir__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.dir__list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.dir__list li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.dir__more {
  margin-top: auto; padding-top: 22px;
  font-size: 15px; font-weight: 600;
  transition: transform .2s ease;
}
.dir--dev .dir__more { color: var(--brand); }
.dir--mkt .dir__more { color: var(--brand-text); }
.dir:hover { transform: translateY(-4px); }
.dir--dev:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 54px -26px rgba(var(--shadow-rgb), .45); }
.dir--mkt:hover { border-color: var(--brand); box-shadow: 0 26px 54px -26px rgba(var(--shadow-rgb), .3); }
.dir:hover .dir__more { transform: translateX(5px); }

/* ---------- ФАКТЫ О КОМПАНИИ ----------
   Было: 4 колонки `auto` встык - ширина каждой определялась длиной подписи, поэтому
   «год основания» и «Нижний Новгород» растягивали соседей, числа шли рваным ритмом,
   а 26px терялись рядом с h2 в 40+. Стало: равные колонки (1fr) с разделителями,
   число - крупная доминанта, подпись под ним фиксированной шириной колонки. */
.about__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line);
}
.cfact { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
/* разделители только между колонками: первая прижата к левому краю текстового блока */
.cfact + .cfact { border-left: 1px solid var(--line); }
.cfact:first-child { padding-left: 0; }
.cfact__num {
  font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
/* «+» акцентом и мельче: иначе читается как разряд числа («14+» -> «142») */
.cfact__suf { font-style: normal; font-size: .62em; color: var(--brand-text); margin-left: 1px; }
.cfact__cap { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }

/* примечание под кейсами - честно говорим, что IT-кейсы в работе */
.cases__note { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.cases__note a { color: var(--brand-text); font-weight: 600; }

/* ---------- ПОЧЕМУ МЫ ---------- */
/* §7: в покое иконка тонированная, солид-оранж только на hover. В home.css у .adv__icon
   солид в покое - три сплошных оранжевых квадрата в ряд. Правим scoped:
   home.css трогать нельзя, его читают прод-главная и 32 посадочные. */
.home--brand .advantages { padding-block: 0; }
.home--brand .adv__icon {
  background: rgba(229,97,33,.12); color: var(--brand-strong);
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.home--brand .adv:hover .adv__icon { background: var(--brand); color: #fff; transform: scale(1.08) rotate(-4deg); }

/* ---------- О КОМПАНИИ (фото + текст) ---------- */
.about { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.about__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px -30px rgba(var(--shadow-rgb), .4);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__text { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.about__copy .btn { margin-top: 24px; }

/* ---------- Группы услуг на странице направления ---------- */
.svc-group__label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 32px 0 14px;
}
.svc-group__label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}
.services__grid--group { margin-bottom: 8px; }

/* ---------- ПЛАТФОРМА (тёмная панель, §5) ---------- */
.platform {
  position: relative; isolation: isolate;
  background: radial-gradient(130% 130% at 12% 0%, #26262a 0%, #17171a 55%, #101012 100%);
  border-radius: var(--r-lg); padding: 56px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  overflow: hidden;
}
/* микро-шум против бандинга градиента - тот же приём, что у .process/.cta */
.platform::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: .05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* мягкое оранжевое свечение в углу - чтобы панель не была «чисто тёмной» */
.platform::before {
  content: ""; position: absolute; width: 460px; height: 460px;
  right: -140px; top: -180px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(229,97,33,.42) 0%, rgba(229,97,33,0) 65%);
  filter: blur(20px);
}
.platform__copy { position: relative; z-index: 2; }
.platform__label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.platform__label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}
.platform__title {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.08; color: #fff;
}
.platform__title::after { content: "."; color: var(--brand); }
.platform__text {
  margin-top: 18px; font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.72); max-width: 52ch;
}
.platform__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Плитки модулей - «кирпичи» конфигуратора. Стекло на тёмном, как .gw в hero. */
.platform__modules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  position: relative; z-index: 2;
}
.pmod {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.3;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
/* маркер - оранжевая точка (§6), не иконка-галочка */
.pmod::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.pmod:hover { background: rgba(255,255,255,.1); border-color: rgba(229,97,33,.5); transform: translateY(-2px); }

/* ---------- РЕШЕНИЯ (карточки, §4) ---------- */
.sols__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 30px -24px rgba(var(--shadow-rgb), .18);
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
/* иконка тонирована в покое, солид-оранж только на hover (§7) */
.sol__icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(229,97,33,.12); color: var(--brand-strong);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sol__icon svg { width: 24px; height: 24px; }
.sol__title { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.sol__text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* стрелка уезжает на hover карточки - микро-взаимодействие как у .case__more (§11) */
.sol__more {
  margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--brand-strong);
  transition: transform .2s ease;
}
.sol:hover .sol__more { transform: translateX(5px); }
.sol:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 42px -24px rgba(var(--shadow-rgb), .26); }
.sol:hover .sol__icon { background: var(--brand); color: #fff; transform: scale(1.08) rotate(-4deg); }

/* Стили мега-меню «Разработка» (.mega__grid--dev, .mega-promo*) переехали в style.css:
   шапка одинаковая на всём сайте, а этот файл подключается только на главной,
   направлениях и решениях - на нишах и услугах промо-карточка оставалась без стилей. */

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .sols__grid { grid-template-columns: 1fr 1fr; }
  .platform { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
  .platform__text { max-width: none; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  /* цифры платформы: в одну колонку под текстом смотрелись бы столбиком - кладём в ряд */
}
@media (max-width: 960px) {
  .dirs { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Виджеты - чистый декор (aria-hidden). В потоке они занимали ~750px до первого смысла,
     а развилка уезжала на 1527px, то есть на 3,2 экрана. Декору столько не положено:
     на узких экранах прячем и отдаём место развилке в hero. */
  .home--brand .hero__widgets { display: none; }
  .home--brand .hero__forks { margin-top: 22px; }
  .home--brand .fork { min-width: 0; flex: 1 1 100%; }
  /* Три факта остаются в один ряд и на мобиле: перенос в 2 колонки оставлял третий
     элемент один во второй строке с разделителем слева - висел сиротой. Ужимаем отступы. */
  .home--brand .cfact { padding-left: 14px; }
  .home--brand .cfact__num { font-size: 26px; }
  .home--brand .cfact__cap { font-size: 12px; }
}
@media (max-width: 960px) {
  /* в мобильном аккордеоне мега-меню - одна колонка (см. style.css) */
  .mega__grid--dev { grid-template-columns: 1fr; }
  /* hero: фото уходит под текст, а не жмётся в узкую колонку */
  .hero__panel--brand { grid-template-columns: 1fr; }
  .hero__photo { aspect-ratio: 16 / 9; }
  .dirs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sols__grid { grid-template-columns: 1fr; }
  .platform { padding: 28px 22px; border-radius: var(--r-md); }
  /* модули остаются в 2 колонки: 12 плиток в один столбик - слишком длинный скролл */
  .pmod { padding: 10px 12px; font-size: 13px; }
  .dir__body { padding: 22px 20px 24px; }
  .dir__title { font-size: 24px; }
}

/* ==========================================================================
   НАПРАВЛЕНИЕ «РАЗРАБОТКА» - hero без фото + светлая платформа
   ========================================================================== */

/* Hero без фото: одна колонка вместо сетки 1.05fr/.95fr. Высоту снимаем -
   пустой правой колонки больше нет, и 560px растягивали бы панель впустую. */
.hero__panel--wide {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-top: 72px; padding-bottom: 72px;
}
/* Текст шире, чем в двухколоночном hero (там 40ch под фото), но не во всю панель:
   строка длиннее ~70 знаков читается тяжело. */
.hero__panel--wide .hero__sub { max-width: 68ch; }

/* Маркеры типов проектов. Не метрики - перечень, поэтому набраны спокойно. */
.hero__marks {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  position: relative; z-index: 2;
}
.hero__marks li {
  font-size: 14px; color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill);
  padding: 8px 15px; background: rgba(255,255,255,.05);
}

/* ---------- Что автоматизируем ---------- */
/* Подложка --mist разбивает череду белых секций, не уводя в тёмное (§9). */
.section--mist { background: var(--mist); }
/* Зазор после hero переехал в style.css - к .hero, а не к модификатору .hero--dark.
   Причина: тёмная панель бывает и без этого модификатора (.svc-hero на страницах услуг,
   ниш и информационных), и правило до них не доставало - слипание вылезло третий раз. */
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proccard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 24px;
}
.proccard__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.proccard__text { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* Иконка - опциональна: на /razrabotka/ карточки без неё, на решениях с ней. */
.proccard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 12px; background: rgba(229,97,33,.1); color: var(--brand);
}
.proccard__icon svg { width: 21px; height: 21px; }

/* ---------- Страница решения ---------- */
.sol-prose { max-width: 780px; }
.sol-prose p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.sol-prose p + p { margin-top: 18px; }
.sol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 780px; }
.sol-list li {
  position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--ink);
}
/* prime-dot вместо маркера списка - тот же мотив, что у лейблов секций */
.sol-list li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}

@media (max-width: 1000px) { .proc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .proc-grid { grid-template-columns: 1fr; } }

/* ---------- Платформа: светлая сетка модулей ---------- */
.plat-lead { max-width: 820px; margin: 16px 0 32px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.modgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.modcard {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.modcard:hover { border-color: rgba(229,97,33,.45); box-shadow: 0 10px 24px -18px rgba(var(--shadow-rgb), .5); }
/* prime-dot: тот же мотив, что у лейблов секций */
.modcard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.modcard__name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.plat-actions { margin-top: 28px; }

@media (max-width: 1100px) { .modgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .modgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .modgrid { grid-template-columns: 1fr; } }

/* ---------- 404: ненайденный модуль ---------- */
/* Панель ниже стандартного hero: на 404 нет контента, который нужно уместить,
   а пустой экран в 560px читается как «сайт сломался». */
.e404__panel { min-height: 0; align-items: center; }

/* Лейбл на тёмном: базовый .sec-label рассчитан на светлый холст (--ink-soft). */
.sec-label--light { color: rgba(255, 255, 255, .65); }

.e404__code {
  color: #fff; font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(64px, 9vw, 132px); line-height: 1;
}
/* Flex именно на цифрах, а не на h1: внутри h1 лежит ещё .screen-reader-text,
   а точка-ноль в обычном инлайн-потоке размеры в em не принимает (была видна «44»). */
.e404__num { display: flex; align-items: center; gap: .05em; }
/* prime-dot вместо нуля - тот же мотив, что у лейблов и .modcard__dot */
.e404__dot {
  width: .58em; height: .58em; border-radius: 50%;
  background: linear-gradient(135deg, #f2793a, #d24e0f);
  box-shadow: 0 18px 40px -14px rgba(229, 97, 33, .8);
  flex: none;
}

/* Сетка модулей: 8 карточек + пустой слот. На тёмном - те же .pmod, что на главной. */
.e404__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: center; position: relative; z-index: 2;
}
.e404__slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 16px; border-radius: 14px;
  border: 1px dashed rgba(229, 97, 33, .55);
  background: rgba(229, 97, 33, .06);
  text-align: center;
}
.e404__slot-mark { font-size: 20px; font-weight: 800; color: var(--brand); line-height: 1; }
.e404__slot-cap {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Развилка: та же логика, что .dir на главной, но без фото и компактнее -
   на 404 это указатель, а не витрина направления. */
.e404__forks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 28px; }
.e404-fork {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 30px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 34px -22px rgba(var(--shadow-rgb), .16);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.e404-fork:hover {
  border-color: rgba(229, 97, 33, .45);
  box-shadow: 0 18px 40px -24px rgba(var(--shadow-rgb), .45);
  transform: translateY(-2px);
}
.e404-fork__aud { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.e404-fork__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-top: 10px; }
.e404-fork__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
.e404-fork__more { font-weight: 600; color: var(--brand-strong); margin-top: 18px; transition: transform .18s ease; }
.e404-fork:hover .e404-fork__more { transform: translateX(3px); }

/* Частые разделы - пилюли в одну строку под развилкой. */
.e404__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.e404__links-label { font-size: 14px; color: var(--ink-soft); }
.e404__link {
  display: inline-flex; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--mist); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.e404__link:hover { background: var(--paper); border-color: rgba(229, 97, 33, .45); color: var(--brand-strong); }

@media (max-width: 900px) {
  .e404__grid { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .e404__forks { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .e404__grid { grid-template-columns: 1fr 1fr; }
  .e404-fork { padding: 24px; }
}

/* ---------- Карта сайта ---------- */
.smap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.smap__title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.smap__title::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}
.smap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.smap__list a { font-size: 15px; line-height: 1.4; color: var(--ink); }
.smap__list a:hover { color: var(--brand-strong); }

@media (max-width: 900px) { .smap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .smap { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Уважение к настройке ОС (обязательно для любой новой анимации) ---------- */
@media (prefers-reduced-motion: reduce) {
  .sol:hover, .pmod:hover, .mega-promo:hover, .dir:hover { transform: none; }
  .sol:hover .sol__icon, .sol:hover .sol__more { transform: none; }
  .dir:hover .dir__media img, .dir:hover .dir__more { transform: none; }
  .e404-fork:hover, .e404-fork:hover .e404-fork__more { transform: none; }
}