/* Внутренние страницы: блоки варианта «тёмно-синий и золото».
   Общие части сверху, ниже блоки по страницам. Подключается после navy-gold.css. */

/* ---------- Первый экран внутренней страницы ---------- */
.ng-ihero {
  padding: calc(80px + clamp(48px, 7vw, 112px)) 0 clamp(56px, 6vw, 96px);
  background: none;
  border-bottom: 1px solid var(--line);
}
.ng-ihero::before {
  /* тонкая сетка колонок, как разлиновка ведомости */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(min(100%, 1320px) / 12) 100%;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
  opacity: 0.55;
}
.ng-ihero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 420px at 15% 0%, rgba(226, 182, 92, 0.12), transparent 70%);
}
.ng-ihero__title {
  max-width: 17ch;
  margin-bottom: 0;
  font-size: clamp(2.5rem, 1.3rem + 4vw, 5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.034em;
  padding-bottom: 0.06em;
}
.ng-ihero__lead {
  max-width: 60ch;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-2);
}

/* Общий заголовок раздела на внутренних страницах */
.ng-head h2.display-5 { font-size: var(--fs-h2); line-height: 1.08; }

/* ---------- О нас · Опыт и экспертиза ---------- */
.ng-xp__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.ng-xp__title { margin: 0; font-size: var(--fs-h2); line-height: 1.05; }
.ng-xp__pre, .ng-xp__post { display: block; }
.ng-xp__big {
  display: inline-block;
  font-size: clamp(4.5rem, 2.6rem + 7vw, 9.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.05em;
  padding-bottom: 0.05em;
}
.ng-xp__text { display: grid; gap: 1.25rem; color: var(--text-2); }
.ng-xp__text p { margin: 0; }
.ng-xp__lead { color: var(--text); font-size: var(--fs-lead); line-height: 1.5; font-weight: 300; }

.ng-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--line);
}
.ng-fact {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: 2rem 1.5rem 2rem 0;
}
.ng-fact + .ng-fact { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.ng-fact .medal { --m: 56px; }
.ng-fact__t { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.ng-fact__t span + br + span { color: var(--text-2); font-weight: 400; }

/* ---------- О нас · Подход: шаги загораются слева направо ---------- */
.ng-approach__label { margin-bottom: clamp(28px, 3vw, 44px) !important; color: var(--gold-text); }
.ng-flow {
  counter-reset: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.ng-flow__step {
  counter-increment: flow;
  position: relative;
  padding: 2rem 2rem 2rem 0;
}
.ng-flow__step + .ng-flow__step { padding-left: 2rem; border-left: 1px solid var(--line); }
.ng-flow__step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(226, 182, 92, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 220ms);
}
.ng-flow.is-run .ng-flow__step::after { transform: scaleX(1); }
.ng-flow__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.ng-flow__top::after {
  content: counter(flow, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-3);
}
.ng-flow__top .medal { --m: 60px; }
.ng-flow__step h3 { margin-bottom: 1rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.2; color: var(--gold-text); }
.ng-flow__step p { margin: 0; color: var(--text-2); }

/* ---------- О нас · История ---------- */
.ng-years {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ng-years::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), var(--gold-line));
}
.ng-year { position: relative; padding: 2.25rem 2rem 0 0; }
.ng-year::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 12px rgba(226, 182, 92, 0.6);
  transition: background-color var(--dur-2);
}
.ng-year:hover::before, .ng-year--now::before { background: var(--gold); }
.ng-year__num {
  margin-bottom: 0.75rem;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.ng-year__title { margin-bottom: 1rem; font-size: 1.1875rem; line-height: 1.25; color: var(--text); }
.ng-year p { margin: 0; max-width: 34ch; color: var(--text-2); }

/* ---------- О нас · Услуги: сетка-прейскурант ---------- */
.ng-svc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.ng-svc li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-2) var(--ease-out);
}
.ng-svc li:hover { background: var(--gold-soft); }
.ng-svc .medal { --m: 52px; margin-bottom: 0.75rem; }
.ng-svc h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--gold-text); }
.ng-svc p { margin: 0; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- О нас · География: карта точками и маршруты из Худжанда ---------- */
.ng-geo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ng-geo__lead { margin-bottom: 1.25rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text); }
.ng-geo__p { margin-bottom: 1.25rem; color: var(--text-2); }
.ng-geo strong { color: var(--text); font-weight: 600; }
.ng-geo__panel { padding: clamp(20px, 2.5vw, 36px); }
.ng-map { position: relative; aspect-ratio: 820 / 440; }
.ng-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--map-dot, rgba(176, 196, 232, 0.3));
  -webkit-mask: url("../assets/images/world-dots.svg") center / 100% 100% no-repeat;
  mask: url("../assets/images/world-dots.svg") center / 100% 100% no-repeat;
}
:root[data-theme="light"] .ng-map { --map-dot: rgba(14, 26, 48, 0.2); }
.ng-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ng-map__arc { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.ng-map__pin { fill: var(--bg-2); stroke: var(--gold); stroke-width: 2.25; transition: r var(--dur-2) var(--ease-out); }
.ng-map__pin--hq { fill: var(--gold); stroke: var(--gold-light); }
.ng-map__halo { fill: var(--gold); opacity: 0.18; transform-box: fill-box; transform-origin: center; }
.ng-map__route:hover .ng-map__pin { r: 7; }
.ng-map__route:hover .ng-map__arc { stroke-width: 2.6; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ng-map__halo { animation: ngPulse 2.6s var(--ease-out) infinite; }
}
@keyframes ngPulse {
  0% { transform: scale(0.6); opacity: 0.35; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ng-geo__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.ng-geo__globe { width: 20px; height: 20px; margin-right: 0.25rem; color: var(--gold-text); }
.ng-tag.badge { padding: 0.45rem 0.75rem; border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; }
.ng-tag--gold.badge { border-color: var(--gold-line) !important; color: var(--gold-text) !important; background: var(--gold-soft) !important; }

/* ---------- О нас · Преимущества и миссия ---------- */
.ng-adv {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ng-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.ng-checks li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text);
}
.ng-checks li strong { font-weight: 600; color: var(--gold-text); }
.ng-checks__i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 0.1rem;
  border-radius: 50%;
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.ng-checks__i svg { width: 16px; height: 16px; stroke-width: 2.25; }
.ng-adv__note { max-width: 64ch; margin: 2rem 0 0; color: var(--text-2); }
.ng-mission {
  position: sticky;
  top: 112px;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: radial-gradient(420px 260px at 100% 0%, rgba(226, 182, 92, 0.12), transparent 70%), var(--surface);
  box-shadow: var(--shadow-2);
}
.ng-mission .medal { --m: 64px; margin-bottom: 1.5rem; }
.ng-mission__label {
  margin-bottom: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-text);
}
.ng-mission__title { margin-bottom: 1.5rem; font-size: var(--fs-h2); line-height: 1.05; color: var(--text); }
.ng-mission__text { margin: 0; color: var(--text-2); }
.ng-mission__sign {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gold-line);
  font-weight: 500;
  color: var(--text);
}

/* ---------- О нас · Команда: сцена с портретом выбранного человека и список всех ---------- */
.ng-team {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "stage head" "stage roster" "stage nav";
  gap: 0 clamp(28px, 4.5vw, 80px);
}
.ng-team.is-solo { grid-template-areas: "stage head" "stage ." "stage ."; }
.ng-team__track { display: contents; }
.ng-team__head { grid-area: head; max-width: 640px; margin-bottom: clamp(28px, 3vw, 44px); }
.ng-team__empty { grid-area: roster; padding: 3rem 0; color: var(--text-2); }
.ng-team__nav { grid-area: nav; align-self: start; display: flex; align-items: center; gap: 0.75rem; min-width: 0; margin-top: 2rem; }
.ng-team__nav[hidden] { display: none; }
.ng-team__btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-2), transform 160ms var(--ease-out);
}
.ng-team__btn:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: var(--gold-glow); }
.ng-team__btn:active { transform: scale(0.96); }
.ng-team__dots { display: flex; flex: 0 1 auto; min-width: 0; gap: 0.25rem; }
.ng-team__dot { position: relative; flex: 0 1 auto; width: 28px; min-width: 10px; height: 44px; padding: 0; border: 0; background: none; }
.ng-team__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--line-strong);
  transition: background-color var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.ng-team__dot:hover::before { background: var(--text-3); }
.ng-team__dot.active::before { background: var(--gold); box-shadow: 0 0 8px rgba(226, 182, 92, 0.6); transform: scaleY(1.5); }

/* Сцена: портрет наклоняется за курсором, при смене человека фото и подпись перекладываются */
.ng-stage { grid-area: stage; align-self: start; position: sticky; top: 104px; }
.ng-stage__frame {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 700ms var(--ease-out);
  box-shadow: 0 40px 80px -40px rgba(2, 8, 20, 0.9), 0 0 0 6px var(--bg), 0 0 0 7px var(--gold-line);
  touch-action: pan-y;
}
.ng-stage__frame.is-tilting { transition: transform 140ms linear; }
.ng-stage__photo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: linear-gradient(180deg, #EEF0F3, #DCE0E6); }
.ng-stage__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(calc(var(--dir, 1) * 5%)) scale(1.04);
  filter: blur(6px);
  transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out), filter 600ms var(--ease-out);
}
.ng-stage__layer.is-in { opacity: 1; transform: none; filter: none; }
.ng-stage__layer.is-in.is-out { opacity: 0; transform: scale(0.98); filter: blur(4px); transition-duration: 500ms; }
.ng-stage__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; mix-blend-mode: multiply; filter: saturate(0.92) contrast(1.03); }
.ng-stage__layer.is-empty { display: grid; place-items: center; background: var(--surface); }
.ng-stage__layer.is-empty .medal { --m: 104px; }
.ng-stage__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px 300px at var(--mx) var(--my), rgba(255, 244, 214, 0.42), transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.ng-stage__frame.is-tilting .ng-stage__sheen { opacity: 1; }
.ng-stage__meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.ng-stage__name {
  margin: 0 0 0.45rem;
  font-size: var(--fs-h2);
  line-height: 1.05;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.ng-stage__role { margin: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.ng-stage__meta.is-swap .ng-stage__text { animation: ngMetaIn 560ms var(--ease-out) both; }
@keyframes ngMetaIn { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } }

/* Список: все люди, выбранный в золотой рамке */
.ng-roster {
  grid-area: roster;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(16px, 1.8vw, 26px) clamp(14px, 1.6vw, 22px);
  align-content: start;
}
.ng-roster__item {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ng-roster__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 0.55rem;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #EEF0F3, #DCE0E6);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-2) var(--ease-out), transform 160ms var(--ease-out);
}
.ng-roster__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; mix-blend-mode: multiply; filter: grayscale(0.6) contrast(1.02); transition: filter var(--dur-3) var(--ease-out), transform 700ms var(--ease-out); }
.ng-roster__photo.is-empty { display: grid; place-items: center; background: var(--surface); color: var(--gold-text); }
.ng-roster__photo.is-empty svg { width: 36px; height: 36px; stroke-width: 1.4; }
.ng-roster__name { font-size: 1rem; font-weight: 600; line-height: 1.25; transition: color var(--dur-2); }
.ng-roster__role { font-size: 0.75rem; letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase; color: var(--text-3); }
.ng-roster__item.is-active .ng-roster__photo { box-shadow: 0 0 0 2px var(--gold), 0 0 28px -6px rgba(226, 182, 92, 0.75); }
.ng-roster__item.is-active .ng-roster__photo img { filter: none; }
.ng-roster__item.is-active .ng-roster__name { color: var(--gold-text); }
.ng-roster__item:active .ng-roster__photo { transform: scale(0.97); }
.ng-roster__item:focus-visible { outline: none; }
.ng-roster__item:focus-visible .ng-roster__photo { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .ng-roster__item:hover .ng-roster__photo img { filter: none; transform: scale(1.04); }
  .ng-roster__item:hover .ng-roster__name { color: var(--gold-text); }
}

.ng-person__links { display: flex; gap: 0.5rem; }
.ng-person__link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  transition: border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-2);
}
.ng-person__link:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: var(--gold-glow); }

@media (max-width: 991.98px) {
  .ng-team, .ng-team.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "nav" "roster"; }
  .ng-stage { position: static; width: min(100%, 460px); }
  .ng-team__nav { margin: 1.5rem 0 1.25rem; }
  .ng-roster {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 132px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 8px 6px 14px;
    margin: 0 -6px;
    scrollbar-width: thin;
  }
  .ng-roster__item { scroll-snap-align: start; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1199.98px) {
  .ng-facts { grid-template-columns: 1fr 1fr; }
  .ng-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .ng-fact:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .ng-flow { grid-template-columns: 1fr 1fr; }
  .ng-flow__step:nth-child(3) { padding-left: 0; border-left: 0; }
  .ng-flow__step:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .ng-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .ng-xp__grid, .ng-geo, .ng-adv { grid-template-columns: 1fr; }
  .ng-geo__panel { order: -1; }
  .ng-mission { position: static; }
  .ng-years { grid-template-columns: 1fr; padding-left: 2rem; }
  .ng-years::before { inset: 0 auto 0 5px; width: 1px; height: auto; background: linear-gradient(to bottom, var(--line-strong), var(--gold-line)); }
  .ng-year { padding: 0 0 2.5rem; }
  .ng-year:last-child { padding-bottom: 0; }
  .ng-year::before { top: 10px; left: calc(-2rem); }
}

@media (max-width: 767.98px) {
  .ng-facts, .ng-flow, .ng-svc { grid-template-columns: 1fr; }
  .ng-fact, .ng-fact + .ng-fact, .ng-flow__step, .ng-flow__step + .ng-flow__step { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .ng-fact { grid-template-columns: auto 1fr; align-items: center; padding: 1.25rem 0; }
  .ng-fact:last-child, .ng-flow__step:last-child { border-bottom: 0; }
  .ng-flow__step { padding: 1.75rem 0; }
  .ng-flow__top { margin-bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-flow__step::after { transform: scaleX(1); transition: none; }
}

/* ---------- Страницы услуг: первый экран с эмблемой ---------- */
.ng-ihero__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ng-ihero--svc .ng-ihero__title { max-width: 15ch; }
.dynamic-product-status {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.5rem;
  padding: 5px 12px !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--gold-text) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dynamic-product-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.dynamic-product-status.status-qualified { border-color: rgba(95, 211, 154, 0.5) !important; color: var(--green) !important; }
.dynamic-product-status.status-qualified::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dynamic-product-status.status-closed { border-color: var(--line-strong) !important; color: var(--text-3) !important; }
.dynamic-product-status.status-closed::before { background: var(--text-3); box-shadow: none; }

.ng-emblem { display: grid; place-items: center; padding: 48px 0; }
.ng-emblem__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--gold-text);
  background: radial-gradient(circle at 50% 38%, rgba(244, 217, 144, 0.16), transparent 65%), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(226, 182, 92, 0.6), inset 0 0 0 14px var(--bg), inset 0 0 0 15px rgba(226, 182, 92, 0.3), 0 0 90px -12px rgba(226, 182, 92, 0.42);
}
.ng-emblem__mark::before, .ng-emblem__mark::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1px solid rgba(226, 182, 92, 0.18); }
.ng-emblem__mark::after { inset: -46px; border-style: dashed; border-color: rgba(226, 182, 92, 0.16); }
.ng-emblem__mark svg { width: 34%; height: 34%; stroke-width: 1.15; filter: drop-shadow(0 0 16px rgba(226, 182, 92, 0.45)); }
@media (prefers-reduced-motion: no-preference) {
  .ng-emblem__mark::after { animation: ngSpin 60s linear infinite; }
}
@keyframes ngSpin { to { transform: rotate(360deg); } }

/* ---------- Страницы услуг: четыре пункта, разлиновка ведомости ---------- */
.ng-pillars {
  counter-reset: pillar;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line);
}
.ng-pillar {
  counter-increment: pillar;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: clamp(28px, 3.2vw, 48px) clamp(24px, 3.2vw, 48px) clamp(28px, 3.2vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.ng-pillar:nth-child(even) { padding-left: clamp(24px, 3.2vw, 48px); border-left: 1px solid var(--line); }
.ng-pillar::before {
  content: counter(pillar, decimal-leading-zero);
  position: absolute;
  top: clamp(28px, 3.2vw, 48px);
  right: clamp(24px, 3.2vw, 48px);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-3);
}
.ng-pillar::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(226, 182, 92, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.ng-pillar:hover::after { transform: scaleX(1); }
.ng-pillar .medal { --m: 64px; }
.ng-pillar h2, .ng-pillar h3 { margin: 0.6rem 2.5rem 0.9rem 0; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.15; color: var(--gold-text); }
.ng-pillar p { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.ng-pillars__cta { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

@media (max-width: 991.98px) {
  .ng-ihero__grid { grid-template-columns: 1fr; }
  .ng-emblem { display: none; }
}
@media (max-width: 767.98px) {
  .ng-pillars { grid-template-columns: 1fr; }
  .ng-pillar, .ng-pillar:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .ng-pillar { grid-template-columns: 1fr; gap: 1rem; }
  .ng-pillar::before { right: 0; }
  .ng-pillar .medal { --m: 56px; }
}

/* ---------- Гарантии: сертификат SLA, заметка, пункты ---------- */
.ng-cert {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px);
  text-align: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: radial-gradient(600px 260px at 50% 0%, rgba(226, 182, 92, 0.1), transparent 70%), var(--surface);
  box-shadow: inset 0 0 0 8px var(--bg), inset 0 0 0 9px rgba(226, 182, 92, 0.22), var(--shadow-2);
}
.ng-cert__title { margin-bottom: 1.25rem; font-size: var(--fs-h2); line-height: 1.08; }
.ng-cert__text { max-width: 60ch; margin: 0 auto 2.5rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.ng-cert__seals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 2rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ng-cert__seals li { display: grid; justify-items: center; align-content: start; gap: 0.9rem; padding: 0 1rem; font-weight: 500; color: var(--text); }
.ng-cert__seals li + li { border-left: 1px solid var(--line); }
.ng-cert__seals .medal { --m: 56px; }

.ng-svc--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ng-note {
  padding: 1.75rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: radial-gradient(360px 160px at 0% 0%, rgba(226, 182, 92, 0.1), transparent 70%), var(--surface);
  color: var(--text-2);
}
.ng-note__title { margin-bottom: 0.6rem; font-size: 1.25rem; color: var(--gold-text); }
.ng-points { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.ng-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
.ng-points .medal { --m: 56px; }
.ng-points h3 { margin: 0.4rem 0 0.6rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); color: var(--text); }
.ng-points p { margin: 0; color: var(--text-2); }

@media (max-width: 991.98px) {
  .ng-cert__seals { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
  .ng-cert__seals li:nth-child(3) { border-left: 0; }
  .ng-svc--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .ng-svc--4 { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .ng-cert__seals { grid-template-columns: 1fr; }
  .ng-cert__seals li + li { border-left: 0; }
}

/* ---------- Консалтинг: манифест на первом экране ---------- */
.ng-manifest {
  display: flex;
  align-items: center;
  min-height: min(88vh, 880px);
  border-bottom: 1px solid var(--line);
}
.ng-manifest::after {
  /* кольца «компаса» справа и золотое свечение */
  background:
    radial-gradient(circle at 88% 52%, transparent 0 219px, rgba(226, 182, 92, 0.28) 220px 221px, transparent 222px 309px, rgba(226, 182, 92, 0.16) 310px 311px, transparent 312px 409px, rgba(226, 182, 92, 0.09) 410px 411px, transparent 412px),
    radial-gradient(520px 420px at 88% 52%, rgba(226, 182, 92, 0.14), transparent 70%),
    radial-gradient(900px 420px at 10% 0%, rgba(226, 182, 92, 0.1), transparent 70%);
}
.ng-manifest__title {
  max-width: 16ch;
  margin: 1.75rem 0 0;
  font-size: clamp(2.75rem, 1.3rem + 5vw, 6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.ng-manifest__title .text-gold { display: inline-block; padding-bottom: 0.06em; }
.ng-manifest__lead { max-width: 58ch; margin: 2rem 0 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.ng-manifest__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* ---------- Общие раскладки ---------- */
.ng-svc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ng-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ng-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ng-h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.12; }
.ng-ticks { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.ng-ticks li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--text); }
.ng-ticks svg { flex: none; width: 20px; height: 20px; margin-top: 0.2rem; color: var(--gold-text); stroke-width: 2.25; }
.ng-tagcloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.ng-checks--sm li { font-size: 1rem; grid-template-columns: 40px minmax(0, 1fr); }
.ng-checks--sm strong { display: block; margin-bottom: 0.25rem; font-size: 1.125rem; font-weight: 600; color: var(--text); }
.ng-checks--sm p { margin: 0; color: var(--text-2); font-size: var(--fs-small); }

/* Анимации запускаются, когда блок появляется на экране; без скриптов всё видно сразу */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ng-mini svg { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--ease-out) 200ms; }
  .ng-mini.is-run svg { clip-path: inset(0); }
  .ng-mini__pt { opacity: 0; transition: opacity 300ms var(--ease-out); }
  .ng-mini.is-run .ng-mini__pt { opacity: 1; transition-delay: 1200ms; }
  .ng-ladder li::after { transform: scaleY(0); }
  .ng-ladder.is-run li::after { transform: scaleY(1); }
  .ng-ladder li::before { transform: scaleX(0); }
  .ng-ladder.is-run li::before { transform: scaleX(1); }
}

/* ---------- Консалтинг: схема реинжиниринга ---------- */
.ng-board { overflow: hidden; }
.ng-board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
}
:root[data-theme="light"] .ng-board__bar { background: var(--surface-2); }
.ng-board__dots { display: flex; gap: 6px; }
.ng-board__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ng-board__dots span:first-child { background: var(--gold); }
.ng-board__file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.06em; }
.ng-board__zoom { display: flex; align-items: center; gap: 0.6rem; }
.ng-board__zoom svg { width: 14px; height: 14px; }
.ng-board__canvas {
  --gap: 2.75rem;
  counter-reset: node;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 2rem 1.75rem;
  list-style: none;
  background-image: radial-gradient(var(--dot, rgba(176, 196, 232, 0.16)) 1px, transparent 1px);
  background-size: 20px 20px;
}
:root[data-theme="light"] .ng-board__canvas { --dot: rgba(14, 26, 48, 0.14); }
.ng-node {
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.ng-node h3 { margin: 0.55rem 0 0.25rem; font-size: 0.9375rem; line-height: 1.25; color: var(--text); }
.ng-node p { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.ng-node__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-3); }
.ng-node__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-3)); }
.ng-node__tag--red { --c: #E8705F; }
.ng-node__tag--amber { --c: #E9B44C; }
.ng-node__tag--blue { --c: #6F8FD6; }
.ng-node__tag--gold { --c: var(--gold); color: var(--gold-text); }
.ng-node--1 { grid-area: 1 / 1; }
.ng-node--2 { grid-area: 1 / 2; }
.ng-node--3 { grid-area: 1 / 3; }
.ng-node--4 { grid-area: 2 / 3; }
.ng-node--5 { grid-area: 2 / 1 / 3 / 3; }
.ng-node--gold { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(226, 182, 92, 0.25), 0 0 26px -4px rgba(226, 182, 92, 0.45); }
.ng-node--result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: transparent;
  background: var(--gold-fill);
  color: var(--on-gold);
}
.ng-node--result h3 { margin: 0.3rem 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--on-gold); }
.ng-node--result .ng-node__tag { color: var(--on-gold); font-weight: 600; }
.ng-node--result .ng-node__tag::before { display: none; }
.ng-node--result .ng-node__tag svg { width: 14px; height: 14px; }
.ng-node__kpi { text-align: right; font-size: 0.75rem; opacity: 0.85; }
.ng-node__big { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
/* стрелки между узлами */
.ng-node::after {
  content: "";
  position: absolute;
  width: calc(var(--gap) - 12px);
  height: 2px;
  background: var(--line-strong);
  -webkit-mask: linear-gradient(#000 0 0) left / calc(100% - 7px) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l8 4-8 4z'/%3E%3C/svg%3E") right / 8px 8px no-repeat;
}
.ng-node--1::after, .ng-node--2::after { top: 50%; left: calc(100% + 6px); height: 8px; margin-top: -4px; background: var(--line-strong); -webkit-mask: linear-gradient(#000 0 0) left center / calc(100% - 7px) 2px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l8 4-8 4z'/%3E%3C/svg%3E") right center / 8px 8px no-repeat; mask: linear-gradient(#000 0 0) left center / calc(100% - 7px) 2px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l8 4-8 4z'/%3E%3C/svg%3E") right center / 8px 8px no-repeat; }
.ng-node--2::after { background: var(--gold); }
.ng-node--3::after { top: calc(100% + 6px); left: 50%; width: 8px; height: calc(var(--gap) - 12px); margin-left: -4px; background: var(--line-strong); -webkit-mask: linear-gradient(#000 0 0) center top / 2px calc(100% - 7px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l4 8 4-8z'/%3E%3C/svg%3E") center bottom / 8px 8px no-repeat; mask: linear-gradient(#000 0 0) center top / 2px calc(100% - 7px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l4 8 4-8z'/%3E%3C/svg%3E") center bottom / 8px 8px no-repeat; }
.ng-node--4::after { top: 50%; right: calc(100% + 6px); height: 8px; margin-top: -4px; background: var(--gold); -webkit-mask: linear-gradient(#000 0 0) right center / calc(100% - 7px) 2px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8 0L0 4l8 4z'/%3E%3C/svg%3E") left center / 8px 8px no-repeat; mask: linear-gradient(#000 0 0) right center / calc(100% - 7px) 2px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8 0L0 4l8 4z'/%3E%3C/svg%3E") left center / 8px 8px no-repeat; }
.ng-node--5::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ng-node--gold { animation: ngGlow 2.4s ease-in-out infinite; }
  .ng-board.is-run .ng-node { animation: ngLight 900ms var(--ease-out) both; }
  .ng-board.is-run .ng-node--2 { animation-delay: 300ms; }
  .ng-board.is-run .ng-node--3 { animation: ngLight 900ms var(--ease-out) 600ms both, ngGlow 2.4s ease-in-out 1500ms infinite; }
  .ng-board.is-run .ng-node--4 { animation-delay: 900ms; }
  .ng-board.is-run .ng-node--5 { animation: ngLift 700ms var(--ease-out) 1200ms both; }
}
@keyframes ngGlow { 50% { box-shadow: 0 0 0 1px rgba(226, 182, 92, 0.5), 0 0 34px -2px rgba(226, 182, 92, 0.7); } }
@keyframes ngLight { 40% { border-color: var(--gold); box-shadow: 0 0 24px -4px rgba(226, 182, 92, 0.6); } }
@keyframes ngLift { from { transform: translateY(8px); filter: saturate(0.4); } }

/* ---------- Консалтинг: эволюция — лестница уровней ---------- */
.ng-ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line-strong);
}
.ng-ladder li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(17rem + var(--lvl) * 2.75rem);
  padding: 1.5rem 1.1rem 1.75rem;
  border-left: 1px solid var(--line);
}
.ng-ladder li:last-child { border-right: 1px solid var(--line); }
.ng-ladder li::before {
  /* золотая полка сверху ступени */
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  right: 0;
  height: 3px;
  background: var(--gold);
  opacity: calc(0.3 + var(--lvl) * 0.11);
  box-shadow: 0 0 12px rgba(226, 182, 92, 0.45);
  transform-origin: left;
  transition: transform 600ms var(--ease-out) calc(var(--lvl) * 140ms);
}
.ng-ladder li::after {
  /* заливка ступени растёт снизу */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(226, 182, 92, calc(var(--lvl) * 0.011)), transparent 70%);
  transform-origin: bottom;
  transition: transform 900ms var(--ease-out) calc(var(--lvl) * 140ms);
}
.ng-ladder { position: relative; z-index: 0; }
.ng-ladder h3 { margin-bottom: 0.75rem; font-size: 1.0625rem; line-height: 1.3; color: var(--text); }
.ng-ladder li[style*="--lvl:1"] h3 { color: var(--text-2); }
.ng-ladder .is-key h3 { color: var(--gold-text); }
.ng-ladder p { margin: 0; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Консалтинг: решения по размеру бизнеса ---------- */
.ng-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.ng-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--surface);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2);
}
.ng-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ng-tier h3 { margin-bottom: 0.75rem; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); color: var(--text); }
.ng-tier > p { margin-bottom: 1.75rem; color: var(--text-2); }
.ng-tier ul { display: grid; gap: 0.75rem; margin: auto 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.ng-tier li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-small); color: var(--text); }
.ng-tier li svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--gold-text); stroke-width: 2.25; }
.ng-tier--key {
  border-color: var(--gold-line);
  background: radial-gradient(420px 240px at 50% 0%, rgba(226, 182, 92, 0.14), transparent 70%), var(--surface);
  box-shadow: 0 0 0 1px rgba(226, 182, 92, 0.2), var(--shadow-2);
}
.ng-tier--key h3 { color: var(--gold-text); }
.ng-tier__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--on-gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .ng-tier--key { transform: translateY(-14px); }
  .ng-tier--key:hover { transform: translateY(-18px); }
}

/* ---------- Консалтинг: мини-дашборд ---------- */
.ng-mini { padding: clamp(20px, 2.2vw, 32px); }
.ng-mini__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ng-mini__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text); }
.ng-mini__brand svg { width: 18px; height: 18px; color: var(--gold-text); }
.ng-mini__live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.75rem; color: var(--text-2); }
.ng-mini__dot { color: var(--green); font-size: 0.7rem; }
@media (prefers-reduced-motion: no-preference) { .ng-mini__dot { animation: ngBlink 2s ease-in-out infinite; } }
@keyframes ngBlink { 50% { opacity: 0.3; } }
.ng-mini__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.ng-mini__kpi, .ng-mini__chart { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(0, 0, 0, 0.12); }
:root[data-theme="light"] .ng-mini__kpi, :root[data-theme="light"] .ng-mini__chart { background: var(--surface-2); }
.ng-mini__label { margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ng-mini__val { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.03em; color: var(--text); }
.ng-mini__val svg { width: 20px; height: 20px; }
.ng-up { color: var(--green); }
.ng-mini__chart { position: relative; height: 190px; overflow: hidden; }
.ng-mini__chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ng-mini__delta { font-size: 0.8125rem; font-weight: 600; color: var(--gold-text); }
.ng-mini__plot { position: absolute; left: 0; right: 0; bottom: 0; height: 115px; }
.ng-mini__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ng-mini__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.ng-mini__line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 4px 6px rgba(226, 182, 92, 0.35)); }
.ng-mini__pt { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border: 2px solid var(--gold); border-radius: 50%; background: var(--bg-2); }
.ng-mini__pt--hot { width: 11px; height: 11px; margin: 0 0 -5.5px -5.5px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* ---------- Консалтинг: цепочка систем ---------- */
.ng-chain { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.ng-chain__node {
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.ng-chain__node:hover { border-color: var(--gold-line); transform: translateY(-4px); }
.ng-chain__node .medal { --m: 60px; margin-bottom: 0.4rem; }
.ng-chain__node h3 { margin: 0; font-size: 1rem; line-height: 1.25; color: var(--text); }
.ng-chain__node p { margin: 0; font-size: 0.8125rem; color: var(--text-2); }
.ng-chain__node--core { border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(226, 182, 92, 0.2), 0 0 40px -14px rgba(226, 182, 92, 0.6); }
.ng-chain__node--core .medal { --m: 68px; }
.ng-chain__link {
  position: relative;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
}
.ng-chain__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
  opacity: 0.6;
}
.ng-chain__link span {
  position: relative;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
@media (prefers-reduced-motion: no-preference) {
  .ng-chain__link::before { animation: ngFlow 1.2s linear infinite; }
}
@keyframes ngFlow { to { background-position: 11px 0; } }

/* ---------- Консалтинг: методология на золотой оси ---------- */
.ng-rail {
  --rg: clamp(20px, 3vw, 40px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ng-rail::before, .ng-rail::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 44px;
  right: calc((100% - 3 * var(--rg)) / 4 - 44px);
  height: 2px;
  background: var(--line-strong);
}
.ng-rail::after { background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); box-shadow: 0 0 12px rgba(226, 182, 92, 0.5); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease-out); }
.ng-rail.is-run::after { transform: scaleX(1); }
.ng-rail li { position: relative; z-index: 1; }
.ng-rail .medal { --m: 88px; margin-bottom: 1.5rem; background: radial-gradient(circle at 50% 35%, rgba(244, 217, 144, 0.16), rgba(20, 33, 58, 0) 70%), var(--surface); }
.ng-rail h3 { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 1.3rem; line-height: 1.2; color: var(--text); }
.ng-rail__n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--gold-text); }
.ng-rail p { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
@media (prefers-reduced-motion: no-preference) {
  .ng-rail.is-run .medal { animation: ngLit 900ms var(--ease-out) both; }
  .ng-rail.is-run li:nth-child(2) .medal { animation-delay: 400ms; }
  .ng-rail.is-run li:nth-child(3) .medal { animation-delay: 800ms; }
  .ng-rail.is-run li:nth-child(4) .medal { animation-delay: 1200ms; }
}
@keyframes ngLit { 50% { box-shadow: inset 0 0 0 1.5px var(--gold-light), inset 0 0 0 5px var(--bg), inset 0 0 0 6px rgba(244, 217, 144, 0.6), 0 0 44px 0 rgba(226, 182, 92, 0.7); } }

/* ---------- Итоговый призыв в рамке ---------- */
.ng-cta-panel {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 64px);
  text-align: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: radial-gradient(520px 260px at 50% 0%, rgba(226, 182, 92, 0.12), transparent 70%), var(--surface);
  box-shadow: inset 0 0 0 8px var(--bg), inset 0 0 0 9px rgba(226, 182, 92, 0.2), var(--shadow-2);
}
.ng-cta-panel h2 { font-size: var(--fs-h2) !important; line-height: 1.08; }
.ng-cta-panel .lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
.ng-cta-panel__note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; font-size: var(--fs-small); color: var(--text-2); }
.ng-cta-panel__note svg { width: 18px; height: 18px; color: var(--gold-text); }

@media (max-width: 1199.98px) {
  .ng-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; align-items: stretch; }
  .ng-ladder li { min-height: 0; }
  .ng-chain { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
  .ng-chain__node { flex: 0 0 calc((100% - 2 * 56px) / 3); }
  .ng-chain__link:nth-child(6) { display: none; }
}
@media (max-width: 991.98px) {
  .ng-split, .ng-split--even { grid-template-columns: 1fr; }
  .ng-svc--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-tiers { grid-template-columns: 1fr; }
  .ng-rail { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .ng-rail::before, .ng-rail::after { display: none; }
  .ng-manifest::after { background: radial-gradient(520px 420px at 90% 10%, rgba(226, 182, 92, 0.14), transparent 70%); }
}
@media (max-width: 767.98px) {
  .ng-manifest { min-height: 0; }
  .ng-svc--3 { grid-template-columns: 1fr; }
  .ng-ladder { grid-template-columns: 1fr; row-gap: 0; border-bottom: 0; }
  .ng-ladder li { padding: 1.5rem 0 1.5rem 1.25rem; border-left: 0; border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .ng-ladder li::before { top: 1.5rem; bottom: 1.5rem; right: auto; left: 0; width: 3px; height: auto; transform-origin: top; }
  .ng-board__canvas { grid-template-columns: 1fr; --gap: 2rem; padding: 1.5rem 1.1rem; }
  .ng-node--1, .ng-node--2, .ng-node--3, .ng-node--4, .ng-node--5 { grid-area: auto; }
  .ng-node--1::after, .ng-node--2::after, .ng-node--3::after, .ng-node--4::after {
    top: calc(100% + 6px); left: 50%; right: auto; width: 8px; height: calc(var(--gap) - 12px); margin: 0 0 0 -4px;
    -webkit-mask: linear-gradient(#000 0 0) center top / 2px calc(100% - 7px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l4 8 4-8z'/%3E%3C/svg%3E") center bottom / 8px 8px no-repeat;
    mask: linear-gradient(#000 0 0) center top / 2px calc(100% - 7px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0l4 8 4-8z'/%3E%3C/svg%3E") center bottom / 8px 8px no-repeat;
  }
  .ng-node--result { flex-wrap: wrap; }
  .ng-chain { flex-direction: column; flex-wrap: nowrap; }
  .ng-chain__node { flex: none; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 1rem; padding: 1.1rem 1.25rem; }
  .ng-chain__node .medal { grid-row: span 2; margin: 0; --m: 52px; }
  .ng-chain__node--core .medal { --m: 56px; }
  .ng-chain__link, .ng-chain__link:nth-child(6) { display: grid; flex: 0 0 44px; }
  .ng-chain__link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 11px); animation-name: ngFlowV; }
  .ng-rail { grid-template-columns: 1fr; }
  .ng-rail li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; }
  .ng-rail .medal { --m: 64px; grid-row: span 2; margin: 0; }
  .ng-mini__kpis { grid-template-columns: 1fr; }
}
@keyframes ngFlowV { to { background-position: 0 11px; } }

/* ---------- Разработка ПО: первый экран с кодом ---------- */
.ng-sdhero { padding-bottom: clamp(56px, 6vw, 96px); }
.ng-sdhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ng-sdhero__title { max-width: 21ch; margin-top: 1.5rem; font-size: clamp(2.2rem, 1.2rem + 3vw, 3.9rem); line-height: 1.05; }
.ng-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 620px;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--line);
}
.ng-stats > div { padding: 1rem 1rem 1rem 0; }
.ng-stats > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.ng-stats__n {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ng-stats dd { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--text-2); }

.ng-code {
  position: relative;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), #0D172B;
  box-shadow: 0 40px 80px -36px rgba(2, 8, 20, 0.9), 0 0 60px -20px rgba(226, 182, 92, 0.35);
  color: #C9D3E3;
  overflow: hidden;
}
.ng-code__bar { display: flex; gap: 6px; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(176, 196, 232, 0.12); }
.ng-code__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(176, 196, 232, 0.24); }
.ng-code__bar span:first-child { background: #E2B65C; }
.ng-code__body { padding: 1.5rem 1.5rem 1.75rem; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.85; white-space: nowrap; overflow-x: auto; }
.ng-code .code-comment { color: #7D89A1; }
.ng-code .code-keyword { color: #E2B65C; }
.ng-code .code-string { color: #F4D990; }
.ng-code .code-name { color: #FFFFFF; }
.ng-code .code-ok { color: #5FD39A; }
@media (prefers-reduced-motion: no-preference) {
  .ng-code .code-ok::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.3em; vertical-align: -0.2em; background: #E2B65C; animation: ngBlink 1.1s steps(1) infinite; }
}

/* ---------- Разработка ПО: что мы создаём — указатель ---------- */
.ng-index {
  counter-reset: idx;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line);
}
.ng-index li {
  counter-increment: idx;
  display: grid;
  grid-template-columns: 2.25rem 44px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
  transition: background-color var(--dur-2) var(--ease-out);
}
.ng-index li::before { content: counter(idx, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3); }
.ng-index li:hover { background: linear-gradient(90deg, var(--gold-soft), transparent 80%); }
.ng-index li:target { background: linear-gradient(90deg, var(--gold-soft), transparent 80%); }
.ng-index .medal { --m: 44px; }
.ng-index h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; color: var(--text); }
.ng-index p { margin: 0; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Разработка ПО: отрасли (карточки рисует сервер) ---------- */
.ng-indgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ng-indgrid > [class*="col-"] { width: auto; max-width: none; padding: 0; }
.ng-indgrid a { display: block; height: 100%; text-decoration: none; }
.ng-indgrid .feature-card {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.75rem 1rem !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  text-align: center;
}
.ng-indgrid a:hover .feature-card { border-color: var(--gold-line) !important; }
.ng-indgrid .icon-circle {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 !important;
  border-radius: 50%;
  color: var(--gold-text);
  background: radial-gradient(circle at 50% 35%, rgba(244, 217, 144, 0.16), rgba(20, 33, 58, 0) 70%), var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(226, 182, 92, 0.55), inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(226, 182, 92, 0.25);
}
.ng-indgrid .icon-circle svg { width: 24px; height: 24px; stroke-width: 1.5; }
.ng-indgrid .feature-card span { color: var(--text) !important; font-weight: 500; }

/* ---------- Разработка ПО: процесс из семи шагов ---------- */
.ng-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ng-steps::before, .ng-steps::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 24px;
  right: calc((100% - 6rem) / 7 - 24px);
  height: 2px;
  background: var(--line-strong);
}
.ng-steps::after { background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); box-shadow: 0 0 12px rgba(226, 182, 92, 0.5); transform: scaleX(0); transform-origin: left; transition: transform 1800ms var(--ease-out); }
.ng-steps.is-run::after { transform: scaleX(1); }
.ng-steps li { position: relative; z-index: 1; }
.process-step-num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--gold-text);
  box-shadow: 0 0 0 5px var(--bg-2);
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.ng-steps h3 { margin-bottom: 0.5rem; font-size: 1.0625rem; line-height: 1.25; color: var(--text); transition: color var(--dur-2); }
.ng-steps p { margin: 0; font-size: 0.8125rem; color: var(--text-2); }
.process-step.is-completed .process-step-num { background: var(--gold-fill); color: var(--on-gold); border-color: transparent; }
.process-step.is-current .process-step-num { border-color: var(--gold); box-shadow: 0 0 0 5px var(--bg-2), 0 0 26px rgba(226, 182, 92, 0.6); }
.process-step.is-current h3 { color: var(--gold-text); }

/* ---------- Разработка ПО: стек технологий ---------- */
.ng-tech { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ng-tech__body { position: relative; min-height: 280px; display: grid; align-items: center; }
.ng-techgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.ng-techgrid:empty { display: none; }
.ng-techgrid > [class*="col-"] { width: auto; max-width: none; padding: 0; }
.tech-category-card { height: 100%; padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.tech-category-card h6 { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.tech-badge { display: inline-flex; padding: 0.35rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; color: var(--text); }
.ng-tech__body:has(.ng-techgrid:not(:empty)) .ng-stackart { display: none; }
.ng-stackart { position: relative; height: 300px; perspective: 900px; }
.ng-stackart span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(340px, 70%);
  aspect-ratio: 1.6;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(244, 217, 144, 0.14), rgba(20, 33, 58, 0) 60%), var(--surface);
  box-shadow: 0 30px 50px -30px rgba(2, 8, 20, 0.9), inset 0 0 0 6px var(--bg-2), inset 0 0 0 7px rgba(226, 182, 92, 0.18);
  transform: translate(-50%, -50%) translateY(calc((var(--i) - 1.5) * 46px)) rotateX(58deg) rotateZ(-38deg);
  transition: transform 1100ms var(--ease-out), opacity 600ms var(--ease-out);
  transition-delay: calc((3 - var(--i)) * 120ms);
}
.ng-stackart span:nth-child(1) { --i: 3; opacity: 0.55; }
.ng-stackart span:nth-child(2) { --i: 2; opacity: 0.75; }
.ng-stackart span:nth-child(3) { --i: 1; opacity: 0.9; }
.ng-stackart span:nth-child(4) { --i: 0; border-color: var(--gold); box-shadow: 0 30px 50px -30px rgba(2, 8, 20, 0.9), inset 0 0 0 6px var(--bg-2), inset 0 0 0 7px rgba(226, 182, 92, 0.4), 0 0 50px -10px rgba(226, 182, 92, 0.5); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ng-stackart:not(.is-run) span { transform: translate(-50%, -50%) translateY(calc((var(--i) - 1.5) * 10px)) rotateX(58deg) rotateZ(-38deg); }
}

/* ---------- Разработка ПО: связанные решения ---------- */
.ng-linkcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.ng-linkcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.ng-linkcard:hover { border-color: var(--gold-line); transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--text); }
.ng-linkcard .medal { --m: 48px; }
.ng-linkcard h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; line-height: 1.25; color: var(--text); }
.ng-linkcard p { margin: 0; font-size: 0.8125rem; color: var(--text-2); }
.ng-linkcard__go { width: 20px; height: 20px; color: var(--gold-text); transition: transform var(--dur-2) var(--ease-out); }
.ng-linkcard:hover .ng-linkcard__go { transform: translateX(4px); }
.ng-cta-panel__medal { --m: 72px; margin-bottom: 1.75rem; }

@media (max-width: 1199.98px) {
  .ng-index li { grid-template-columns: 2.25rem 44px minmax(0, 1fr); row-gap: 0.25rem; }
  .ng-index p { grid-column: 3; }
  .ng-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.5rem; }
  .ng-steps::before, .ng-steps::after { display: none; }
}
@media (max-width: 991.98px) {
  .ng-sdhero__grid, .ng-tech { grid-template-columns: 1fr; }
  .ng-linkcards { grid-template-columns: 1fr 1fr; }
  .ng-code__body { font-size: 0.75rem; }
}
@media (max-width: 767.98px) {
  .ng-stats { grid-template-columns: 1fr 1fr; }
  .ng-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ng-stats > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .ng-index { grid-template-columns: 1fr; }
  .ng-indgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ng-steps { grid-template-columns: 1fr; row-gap: 0; }
  .ng-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.5rem; }
  .ng-steps li::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line-strong); }
  .ng-steps li:last-child::before { display: none; }
  .process-step-num { grid-row: span 2; margin: 0; }
  .ng-linkcards { grid-template-columns: 1fr; }
  .ng-code { display: none; }
  .ng-stackart { height: 220px; }
}

/* ---------- Отрасли: карточки с фото ---------- */
.ng-indcards { counter-reset: ind; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.ng-indcard {
  counter-increment: ind;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-margin-top: 110px;
  transition: border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
}
.ng-indcard:hover, .ng-indcard:target { border-color: var(--gold-line); box-shadow: var(--shadow-2); }
.ng-indcard__media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.ng-indcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 38, 0) 35%, var(--surface) 100%); }
.ng-indcard__media::before {
  content: counter(ind, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(226, 182, 92, 0.6);
  border-radius: var(--radius);
  background: rgba(11, 20, 38, 0.65);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #F4D990;
}
.ng-indcard__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.05); transition: transform 900ms var(--ease-out), filter var(--dur-3); }
@media (hover: hover) and (pointer: fine) {
  .ng-indcard:hover .ng-indcard__media img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }
}
.ng-indcard__body { position: relative; padding: 0 clamp(20px, 2.4vw, 36px) clamp(24px, 2.6vw, 36px); margin-top: -34px; }
.ng-indcard__body .medal { --m: 64px; position: relative; z-index: 1; margin-bottom: 1rem; }
.ng-indcard h2, .ng-indcard h3 { margin-bottom: 0.6rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem); color: var(--gold-text); }
.ng-indcard p { margin: 0; color: var(--text-2); }

/* ---------- Кейсы: ведомость «проблема, решение, результат» ---------- */
.ng-cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.ng-case-card {
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2);
}
.ng-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--gold-line); }
.ng-case-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ng-case-card__head .medal { --m: 56px; }
.ng-case-card h2, .ng-case-card h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); color: var(--text); }
.ng-case-card__rows { margin: 0; border-top: 1px solid var(--line); }
.ng-case-card__rows > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.ng-case-card__rows dt { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding-top: 0.2rem; }
.ng-case-card__rows dd { margin: 0; color: var(--text-2); }
.ng-case-card__rows .is-result { margin-top: 0.25rem; padding: 1rem; border: 1px solid var(--gold-line); border-radius: var(--radius-card); background: var(--gold-soft); }
.ng-case-card__rows .is-result dt { color: var(--gold-text); }
.ng-case-card__rows .is-result dd { color: var(--text); font-weight: 600; }

/* ---------- Продукты: разделы каталога ---------- */
.ng-cat + .ng-cat { margin-top: clamp(48px, 6vw, 80px); }
.ng-cat__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--gold-line); }
.ng-cat__head .medal { --m: 52px; }
.ng-cat__head h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem); }
.ng-prods { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.ng-prods--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ng-prods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ng-prod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.ng-prod:hover { color: var(--text); border-color: var(--gold-line); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ng-prod--col { grid-template-columns: 1fr; }
.ng-prod .medal { --m: 56px; }
.ng-prod__body { display: flex; flex-direction: column; min-width: 0; }
.ng-prod__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.ng-prod h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--gold-text); }
.ng-prod p { margin: 0 0 1.25rem; font-size: var(--fs-small); color: var(--text-2); }
.ng-prod__go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.ng-prod__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.ng-prod:hover .ng-prod__go svg { transform: translateX(4px); }
.ng-prod .dynamic-product-status { margin-bottom: 0; }
.dynamic-product-status:empty { display: none !important; }

/* ---------- Проекты: фильтры и карточки ---------- */
.ng-filters { margin-bottom: clamp(32px, 4vw, 56px); }
.ng-filters__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.ng-filters .filter-btn { padding: 0.55rem 1.1rem !important; border-radius: 999px !important; font-size: 0.8125rem; }
.ng-filters .filter-btn.btn-outline-glass { border-color: var(--line-strong); color: var(--text) !important; }
.ng-filters .filter-btn.btn-outline-glass:hover { border-color: var(--gold); color: var(--gold-text) !important; }
.ng-projgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.ng-projgrid > .col-12 { grid-column: 1 / -1; }
.ng-projcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 50%), var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.ng-projcard:hover { color: var(--text); border-color: var(--gold-line); transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ng-projcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ng-projcard__top .medal { --m: 64px; }
.ng-projcard__logo { height: 44px; max-width: 160px; padding: 4px 8px; border-radius: var(--radius); background: #fff; object-fit: contain; }
.ng-projcard__client { margin: 0 0 0.4rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.ng-projcard h2, .ng-projcard h3 { margin-bottom: 0.75rem; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.15; color: var(--text); }
.ng-projcard__desc { flex-grow: 1; margin-bottom: 1.5rem; color: var(--text-2); }
.ng-projcard__foot { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ng-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.ng-metric { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft); font-size: 0.8125rem; font-weight: 600; color: var(--gold-text); }
.ng-metric svg { width: 14px; height: 14px; }
.ng-projcard__go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.ng-projcard__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.ng-projcard:hover .ng-projcard__go svg { transform: translateX(4px); }

/* ---------- Загрузка ---------- */
.ng-loading { display: grid; justify-items: center; padding: 3rem 0; color: var(--text-2); }
.ng-loading__ring { width: 40px; height: 40px; border: 2px solid var(--line-strong); border-top-color: var(--gold); border-radius: 50%; animation: ngSpin 0.9s linear infinite; }

/* ---------- Проект: статья и карточка деталей ---------- */
.ng-pd__title { max-width: 22ch; }
.ng-pd { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ng-pd__block + .ng-pd__block { margin-top: clamp(40px, 5vw, 64px); }
.ng-pd__h { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); }
.ng-pd__h::before { content: ""; width: 28px; height: 2px; background: var(--gold); box-shadow: 0 0 10px rgba(226, 182, 92, 0.5); }
.ng-pd__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text); white-space: pre-line; }
.ng-pd__text { color: var(--text-2); white-space: pre-line; }
.ng-pd__result { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--gold-line); border-radius: var(--radius-card); background: radial-gradient(500px 220px at 0% 0%, rgba(226, 182, 92, 0.1), transparent 70%), var(--surface); }
.ng-pd__outcomes { margin-bottom: 1.5rem; font-size: var(--fs-lead); color: var(--text); white-space: pre-line; }
.ng-pd__sub { margin-bottom: 1rem; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.ng-pd__metrics { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ng-pd__metrics > div { flex: 1 1 160px; padding: 1rem 1.1rem !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-card) !important; background: var(--bg-2) !important; }
.ng-pd__metrics .fs-4, .ng-pd__metrics .fs-5 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; letter-spacing: -0.02em; }
.ng-pd__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ng-pd__card { padding: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.ng-pd__card .medal { --m: 52px; margin-bottom: 1rem; }
.ng-pd__card h3 { margin-bottom: 0.5rem; font-size: 1.125rem; color: var(--text); }
.ng-pd__card p { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.ng-pd__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ng-pd__gallery > div { margin: 0 !important; width: auto; padding: 0; }
.ng-pd__gallery img { display: block; width: 100%; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-card) !important; background: var(--bg-2); }
.ng-pd__side { position: sticky; top: 104px; }
.ng-pd__panel { padding: clamp(20px, 2.2vw, 32px); border: 1px solid var(--gold-line); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 6px var(--bg-2), inset 0 0 0 7px rgba(226, 182, 92, 0.18), var(--shadow-2); }
.ng-pd__logo { margin-bottom: 1.25rem; text-align: center; }
.ng-pd__logo img { max-width: 100%; max-height: 80px; padding: 8px; border-radius: var(--radius); background: #fff; object-fit: contain; }
.ng-pd__panel-h { padding-bottom: 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--gold-line); font-size: 1.25rem; color: var(--gold-text); }
.ng-pd__facts { margin: 0 0 1.5rem; }
.ng-pd__facts > div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.ng-pd__facts dt { margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ng-pd__facts dd { margin: 0; color: var(--text); }
.ng-pd__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ng-pd__chips .badge { padding: 0.35rem 0.65rem !important; border: 1px solid var(--line-strong) !important; border-radius: 999px; background: transparent !important; color: var(--text) !important; font-weight: 500; }

/* ---------- Контакты ---------- */
.ng-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.ng-contact > div { display: flex; }
.ng-contact__info, .ng-formpanel { flex: 1; padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.ng-contact__info { border-color: var(--gold-line); background: radial-gradient(420px 260px at 0% 0%, rgba(226, 182, 92, 0.12), transparent 70%), var(--surface); }
.ng-contact__h { margin-bottom: 1.75rem; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem); }
.ng-contact__lines { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ng-contact__lines li { display: flex; align-items: center; gap: 1rem; }
.ng-contact__lines .medal { --m: 52px; }
.ng-contact__lines a { color: var(--text); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
.ng-contact__lines a:hover { color: var(--gold-text); }
.ng-contact__sub { margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.ng-contact__social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ng-social { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 1rem 0.4rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); text-decoration: none; transition: border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-2); }
.ng-social svg { margin: 0 !important; color: var(--gold-text); }
.ng-social:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: var(--gold-glow); }
.ng-success { display: grid; justify-items: center; gap: 0.75rem; padding: 3rem 1rem; text-align: center; border: 1px solid var(--gold-line); border-radius: var(--radius-card); background: var(--gold-soft); }
.ng-success.d-none { display: none !important; }
.ng-success .medal { --m: 72px; }
.ng-success__h { margin: 0.5rem 0 0; font-size: 1.75rem; color: var(--text); }

/* ---------- Аудит и бронирование: мастер ---------- */
.ng-wizard {
  position: relative;
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: radial-gradient(600px 260px at 50% 0%, rgba(226, 182, 92, 0.08), transparent 70%), var(--surface);
  box-shadow: inset 0 0 0 8px var(--bg), inset 0 0 0 9px rgba(226, 182, 92, 0.18), var(--shadow-2);
}
.ng-wizard__track { height: 4px !important; overflow: visible !important; border-radius: 999px; background: var(--line) !important; }
.ng-wizard__bar { border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)) !important; box-shadow: 0 0 12px rgba(226, 182, 92, 0.55); transition: width 400ms var(--ease-out) !important; }
.ng-step-h { margin-bottom: 1.75rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem); color: var(--text); }

/* ---------- Документ (политика) ---------- */
.ng-doc { max-width: 860px; margin: 0 auto; padding: clamp(24px, 4.5vw, 64px); border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); }
.ng-doc__body { color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; }
.ng-doc__body p { margin: 0 0 1rem; max-width: 68ch; }
.ng-doc__body p:first-child { color: var(--text); }
.ng-doc__h { display: flex; align-items: baseline; gap: 0.75rem; margin: 2.75rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); color: var(--text); }
.ng-doc__h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ng-doc__body a { color: var(--gold-text); }

@media (max-width: 991.98px) {
  .ng-prods--3 { grid-template-columns: 1fr 1fr; }
  .ng-pd, .ng-contact { grid-template-columns: 1fr; }
  .ng-pd__side { position: static; }
}
@media (max-width: 767.98px) {
  .ng-indcards, .ng-cases-grid, .ng-prods--2, .ng-prods--3, .ng-projgrid, .ng-pd__cards, .ng-pd__gallery { grid-template-columns: 1fr; }
  .ng-case-card__rows > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .ng-prod { grid-template-columns: 1fr; }
}