/* Лендинг nitinol. Базовый блок стилей перенесён из макета
   (site/design-src/landing-v2.dc.html) без изменений; ниже — то, чем заменены
   конструкции прототипа Design Claude: style-hover → классы, sc-if → data-l/data-t. */

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 820px) {
  #nit [data-diagram] { grid-template-columns: 1fr !important; gap: 14px !important; }
  #nit [data-conn] [data-line] { display: none !important; }
  #nit [data-conn] [data-conn-down] { display: block !important; }
}
body { margin: 0; background: #091426; overflow-x: clip; }
#nit {
  --mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sans: Inter, 'Segoe UI Variable Text', 'Segoe UI', Arial, sans-serif;
  --display: Bahnschrift, 'Aptos Display', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
  --grad: linear-gradient(135deg, #0b55ea 0%, #6044e6 100%);
  --bg: #091426; --surface: #0e1b31; --surface2: #142339; --surface3: #1c2e4b;
  --fg: #e8edf6; --muted: #9fabc4; --faint: #64718c; --border: #1f3049; --border2: #2b3d5c;
  --accent: #67a3ff; --accent2: #9a7cf7; --link: #67a3ff; --code-bg: #0b1830;
  --sel: #1f3a66; --winbar: #0c192e;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  overflow-x: clip;
}
#nit a { color: var(--link); text-underline-offset: 3px; }
#nit a:hover { text-decoration: underline; }
#nit :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#nit ::selection { background: var(--sel); }
#nit a, #nit button { transition: background-color .18s ease, color .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease, transform .12s ease; }
#nit button:active, #nit a:active { transform: translateY(1px); }
@keyframes nitRise { from { opacity: 0; transform: translateY(14px); } }
#nit [data-rise] { animation: nitRise .55s cubic-bezier(.2,.7,.3,1) both; }
#nit [data-rise="2"] { animation-delay: .07s; }
#nit [data-rise="3"] { animation-delay: .14s; }
#nit [data-rise="4"] { animation-delay: .21s; }
@keyframes nitBreathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes nitPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #nit [data-demo-loading] span { animation: none !important; } }
#demo > div[aria-hidden="true"] { animation: nitBreathe 9s ease-in-out infinite; }
#nit [data-logo] { transition: filter .3s ease; }
@keyframes nitWireA { 0%, 68%, 100% { transform: none; } 75% { transform: rotate(14deg); } 83% { transform: rotate(-8deg); } 90% { transform: rotate(3.5deg); } 96% { transform: rotate(-1deg); } }
@keyframes nitWireB { 0%, 68%, 100% { transform: none; } 75% { transform: rotate(-14deg); } 83% { transform: rotate(8deg); } 90% { transform: rotate(-3.5deg); } 96% { transform: rotate(1deg); } }
#nit footer [data-wl] { transform-box: fill-box; transform-origin: center; animation: nitWireA 10s ease-in-out infinite; }
#nit footer [data-wl="b"] { animation-name: nitWireB; }
@media (prefers-reduced-motion: reduce) { #nit [data-logo], #nit [data-wl] { animation: none !important; } }
#nit [data-logo]:hover { filter: drop-shadow(0 2px 18px rgba(103,163,255,.6)); }
#nit main img[style*="border-radius:12px"] { transition: transform .25s ease; }
#nit main img[style*="border-radius:12px"]:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { #nit a, #nit button { transition: none !important; } #nit button:active, #nit a:active { transform: none !important; } #nit [data-rise] { animation: none !important; } #nit main img[style*="border-radius:12px"] { transition: none !important; } #nit main img[style*="border-radius:12px"]:hover { transform: none !important; } }
#nit [data-seg][aria-pressed="true"] { background: var(--surface3) !important; color: var(--fg) !important; border-color: var(--border2) !important; }
@media (max-width: 1079.5px) { #nit [data-mq="desktop"] { display: none !important; } }
@media (min-width: 1080px) { #nit [data-mq="mobile"] { display: none !important; } }
@media (max-width: 859.5px) {
  #nit [data-nav] { display: none !important; }
  #nit [data-logo] { height: 26px !important; }
  #nit header > div { gap: 12px !important; padding: 0 16px !important; }
  #nit header [data-seg] { padding: 4px 9px !important; }
  #nit header a[href="#download"] { padding: 7px 12px !important; font-size: 13px !important; }
}
@media (max-width: 699.5px) {
  #nit [data-diagram] { grid-template-columns: 1fr !important; }
  #nit [data-diagram] > div:nth-child(even) span[aria-hidden="true"] { display: none !important; }
}
#nit [data-demo-frame]:fullscreen { border-radius: 0; }
#nit [data-demo-frame]:fullscreen [data-demo-slot] { height: auto !important; flex: 1; }
#nit [data-demo-frame][data-fs="1"] { position: fixed; inset: 0; z-index: 9999; border-radius: 0; box-shadow: none; }
#nit [data-demo-frame][data-fs="1"] [data-demo-slot] { height: 100% !important; flex: 1; }

/* --- Язык: в прототипе это были парные <sc-if ru/en>. Оба варианта живут в DOM,
       видимость решает атрибут на <html> — переключение без перерисовки и без JS-шаблонов. --- */
[data-l] { display: none; }
html[lang="ru"] [data-l="ru"], html[lang="en"] [data-l="en"] { display: revert; }

/* --- Тема ПРИЛОЖЕНИЯ на скриншотах (не тема сайта — сайт всегда тёмный).
       !important обязателен: у картинок из макета инлайновый display:block,
       а инлайн-стиль перебивает любое правило таблицы по специфичности —
       без этого показывались ОБА варианта скриншота сразу. --- */
[data-t] { display: none !important; }
#nit[data-app-theme="dark"] [data-t="dark"],
#nit[data-app-theme="light"] [data-t="light"] { display: block !important; }

/* --- style-hover из прототипа → настоящие правила. --- */
.h-lnk:hover { color: var(--fg) !important; }
.h-cta:hover { filter: brightness(1.12); box-shadow: 0 14px 34px rgba(11,85,234,.42) !important; }
.h-soft:hover { background: var(--surface2) !important; }
.h-soft-fg:hover { background: var(--surface2) !important; color: var(--fg) !important; }
.h-dash:hover { border-color: var(--accent) !important; color: var(--fg) !important; }
.h-send:hover { filter: brightness(1.1); box-shadow: 0 12px 28px rgba(11,85,234,.4) !important; }
.field:focus { border-color: var(--accent) !important; outline: none; }

/* Постер демо гаснет, когда iframe отрисовался. */
[data-poster][hidden] { display: none !important; }

/* --- Скриншоты открываются в полный размер: в секциях они ужаты по ширине
       колонки, и мелкие детали (метки, чек-листы, рёбра графа) не читаются. --- */
#nit #features img { cursor: zoom-in; }
#nit-lightbox {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: clamp(16px, 4vw, 48px);
  background: color-mix(in oklab, #091426 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}
#nit-lightbox img {
  max-width: 100%; max-height: calc(100% - 40px);
  object-fit: contain;
  border: 1px solid var(--border2); border-radius: 12px; box-shadow: var(--shadow);
}
#nit-lightbox p {
  margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: center;
}
#nit-lightbox [data-close] {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); border-radius: 9px;
  background: var(--surface); color: var(--fg); cursor: pointer;
}
#nit-lightbox [data-close]:hover { background: var(--surface2); }
@media (prefers-reduced-motion: no-preference) {
  #nit-lightbox { animation: nitFade .16s ease-out both; }
}
@keyframes nitFade { from { opacity: 0; } }