/* Shared page shell: topbar + mobile menu, footer, back link, FAQ rows and the
   consent bar. Loaded by every page after design.css (home) or case.css (inner). */
html:has(.nl-page[data-theme="ink"]) { color-scheme: dark; }
html:has(.nl-page[data-theme="paper"]) { color-scheme: light; }
.nl-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.nl-page > main { flex: 1 0 auto; width: 100%; min-width: 0; }
.skip-link { font: 500 15px/1 "Onest", "Helvetica Neue", Arial, system-ui, sans-serif; text-decoration: none; }
/* Compounds such as «ИИ-агентов» stay whole where the measure allows it. */
@container page (min-width: 768px) {
  .nl-nowrap { white-space: nowrap; }
}

/* Topbar */
.nl-topbar-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nl-menu-btn { display: none; }
.nl-menu { display: none; }
/* На телефонах и планшетах шапка закреплена через position: fixed, а не sticky: в Safari и Arc
   прилипшая шапка отстает при сворачивании панели браузера и оставляет щель сверху. Высота шапки
   компенсируется отступом страницы. Медиазапрос, а не контейнерный: .nl-page сам контейнер. */
@media (max-width: 1023px) {
  .nl-topbar-wrap { position: fixed; top: 0; left: 0; right: 0; }
  .nl-page { padding-top: var(--nav-height, 72px); }
}
/* Below 1024px the six links no longer fit beside the CTA: the menu takes over. */
@container page (max-width: 1023px) {
  .nl-nav { display: none; }
  .nl-topbar-wrap .nl-topbar { gap: var(--space-3); }
  .nl-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--space-2) * -1);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--ink);
    cursor: pointer;
  }
  .nl-menu-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .nl-menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 12px;
  }
  .nl-menu-icon::before,
  .nl-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition:
      transform var(--duration-base) var(--easing-inout, cubic-bezier(0.65, 0, 0.35, 1)),
      top var(--duration-base) var(--easing-inout, cubic-bezier(0.65, 0, 0.35, 1)),
      bottom var(--duration-base) var(--easing-inout, cubic-bezier(0.65, 0, 0.35, 1));
  }
  .nl-menu-icon::before { top: 0; }
  .nl-menu-icon::after { bottom: 0; }
  .nl-menu-btn[aria-expanded="true"] .nl-menu-icon::before { top: 5px; transform: rotate(45deg); }
  .nl-menu-btn[aria-expanded="true"] .nl-menu-icon::after { bottom: 5px; transform: rotate(-45deg); }
  .nl-menu[data-open="true"] {
    display: grid;
    align-content: start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 39;
    height: calc(100vh - var(--nav-height));
    box-sizing: border-box;
    background: var(--surface-1);
    padding: var(--space-5) var(--gutter-mobile) var(--space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-floating, 0 24px 64px -24px #0a081259, 0 0 0 1px #0a08121a);
  }
  .nl-menu > a {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
    font: 500 28px/1.2 var(--font-sans);
    letter-spacing: -0.015em;
    color: var(--ink);
    text-decoration: none;
  }
  .nl-menu > a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .nl-menu .nl-menu-foot {
    padding-top: var(--space-6);
    display: grid;
    gap: var(--space-3);
    justify-items: start;
  }
  /* The open menu carries its own CTA; the topbar pill steps back. */
  .nl-page:has(.nl-menu[data-open="true"]) .nl-topbar-cta > .nl-btn { visibility: hidden; }
}
@container page (max-width: 379px) {
  .nl-topbar-cta > .nl-btn { display: none; }
}

/* Back link on inner pages */
.nl-doc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-block: calc(var(--space-2) * -1);
  justify-self: start;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.nl-doc-back svg { flex: none; transition: transform var(--duration-base) var(--easing-standard); }
.nl-doc-back:hover { color: var(--ink); }
.nl-doc-back:hover svg { transform: translateX(-3px); }
.nl-doc-back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* FAQ rows (home, service pages, cases) */
.nl-faq { border-top: 1px solid var(--line); }
.nl-faq:last-of-type { border-bottom: 1px solid var(--line); }
.nl-faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  font: 500 20px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.nl-faq summary::-webkit-details-marker { display: none; }
.nl-faq summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.nl-faq-index {
  font: 400 13px/1.5 var(--font-mono);
  color: var(--accent-text);
}
.nl-faq-plus {
  position: relative;
  width: 24px;
  height: 24px;
  justify-self: end;
  align-self: center;
}
.nl-faq-plus::before,
.nl-faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--easing-standard);
}
.nl-faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.nl-faq[open] .nl-faq-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.nl-faq::details-content {
  height: 0;
  overflow: clip;
  transition:
    height var(--duration-base) var(--easing-standard),
    content-visibility var(--duration-base) allow-discrete;
}
.nl-faq[open]::details-content { height: auto; }
.nl-faq-body {
  padding: 0 0 var(--space-6) 0;
  margin-left: calc(72px + var(--space-6));
  max-width: 640px;
}
@container page (max-width: 767px) {
  .nl-faq summary {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: var(--space-3);
    font-size: 17px;
  }
  .nl-faq-body { margin-left: calc(40px + var(--space-3)); }
}

/* Footer */
.nl-footer-inner {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8) 0 var(--space-7);
  border-top: 1px solid var(--line);
}
.nl-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
.nl-footer-col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  justify-items: start;
}
.nl-footer-about .nl-body-sm { max-width: 320px; hyphens: none; text-wrap: pretty; }
.nl-footer-col a {
  padding-block: 4px;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
  text-decoration: none;
  hyphens: none;
  transition: color var(--duration-fast) var(--easing-standard);
}
.nl-footer-col a:hover { color: var(--ink); }
.nl-footer-col a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.nl-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font: 400 12px/1.5 var(--font-mono);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.nl-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
}
.nl-footer-bottom a,
.nl-privacy-settings {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard), text-decoration-color var(--duration-fast) var(--easing-standard);
}
.nl-footer-bottom a:hover,
.nl-privacy-settings:hover { color: var(--ink); text-decoration-color: var(--ink); }
.nl-footer-bottom a:focus-visible,
.nl-privacy-settings:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
@container page (max-width: 1199px) {
  .nl-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
  }
  .nl-footer-grid .nl-footer-about { grid-column: 1 / -1; }
}
@container page (max-width: 767px) {
  .nl-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .nl-footer-bottom { flex-direction: column; }
}

/* Cookie consent: a slim bar along the bottom edge that never covers page actions.
   It lives outside .nl-page (fixed positioning), so its palette follows the theme here. */
body {
  --consent-bg: #12101e;
  --consent-ink: #f1eef9;
  --consent-ink-2: #c9c2dc;
  --consent-line: #6b6680;
  --consent-accent: #c4b4ff;
  --consent-fill: #f1eef9;
  --consent-on-fill: #06050c;
  --consent-focus: #8a6bff;
}
body:has(.nl-page[data-theme="paper"]) {
  --consent-bg: #ffffff;
  --consent-ink: #0a0812;
  --consent-ink-2: #3d3852;
  --consent-line: #8a86a0;
  --consent-accent: #4a2fc4;
  --consent-fill: #0a0812;
  --consent-on-fill: #f1eef9;
  --consent-focus: #5e42de;
}
.nl-consent-panel {
  box-sizing: border-box;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px) var(--space-5, 24px);
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--consent-line);
  background: var(--consent-bg);
  color: var(--consent-ink);
  box-shadow: 0 -16px 48px -32px #00000080;
  font: 400 14px/1.5 "Onest", "Helvetica Neue", Arial, system-ui, sans-serif;
}
.nl-consent-panel p { margin: 0; }
.nl-consent-panel #nl-consent-title { font-weight: 500; }
.nl-consent-panel .nl-body-sm { font: inherit; color: var(--consent-ink-2); }
.nl-consent-panel .nl-body-sm br { display: none; }
.nl-consent-panel a { margin-left: 6px; color: var(--consent-accent); text-underline-offset: 3px; }
.nl-consent-panel a:hover { color: var(--consent-ink); }
.nl-consent-panel > div { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-consent-panel button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--consent-line);
  border-radius: 999px;
  background: transparent;
  color: var(--consent-ink);
  font: 500 14px/1 "Onest", "Helvetica Neue", Arial, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.nl-consent-panel button:hover { border-color: var(--consent-ink); }
.nl-consent-panel button[data-choice="granted"] { background: var(--consent-fill); color: var(--consent-on-fill); border-color: var(--consent-fill); }
.nl-consent-panel button:focus-visible,
.nl-consent-panel a:focus-visible { outline: 2px solid var(--consent-focus); outline-offset: 3px; }
body:has(.nl-consent-panel:not([hidden])) { padding-bottom: 88px; }
@media (max-width: 700px) {
  .nl-consent-panel { justify-content: flex-start; gap: 8px 16px; }
  .nl-consent-panel button { flex: 1; }
  .nl-consent-panel > div { width: 100%; }
  body:has(.nl-consent-panel:not([hidden])) { padding-bottom: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-faq::details-content { transition: none; }
}

/* Фон первого экрана на страницах с data-glow: два плывущих пятна света и третье за курсором.
   Элемент .nl-glow вставляет site.js; пятна двигаются transform (дрейф) и translate (параллакс за мышью). */
.nl-page[data-glow] { position: relative; isolation: isolate; }
.nl-glow { position: absolute; inset: 0 0 auto; height: min(1400px, 170vh); overflow: hidden; z-index: -1; pointer-events: none; --gx: 0; --gy: 0; -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%); }
.nl-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.85; will-change: transform; }
.nl-glow-a { top: -200px; left: -120px; width: 820px; height: 820px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 72%, transparent), transparent 70%); animation: nl-glow-a 38s ease-in-out infinite alternate; translate: calc(var(--gx) * -60px) calc(var(--gy) * -40px); }
.nl-glow-b { top: 20px; right: -220px; width: 900px; height: 900px; background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 42%, transparent), transparent 70%); animation: nl-glow-b 46s ease-in-out infinite alternate; translate: calc(var(--gx) * 50px) calc(var(--gy) * 36px); }
.nl-glow-cursor { top: 0; left: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 48%, transparent), transparent 70%); opacity: 0; transition: opacity 0.8s var(--easing-standard, ease); }
.nl-glow.is-live .nl-glow-cursor { opacity: 0.7; }
@keyframes nl-glow-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(160px, 120px, 0) scale(1.18); } }
@keyframes nl-glow-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-200px, 160px, 0) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .nl-glow i { animation: none; } .nl-glow-cursor { display: none; } }
/* На телефонах фона нет (владелец 30.10). */
@media (max-width: 767px) { .nl-glow { display: none; } }