/*
 * Лендинг candiag.app — только раскладка страницы.
 *
 * Цвет, шрифт, форма, отступы и компоненты — из общей основы
 * web/shared/candiag.css, снятой с ресурсов приложения. Здесь своего
 * цвета нет ни одного: страница обязана выглядеть тем же продуктом,
 * что планшет (указание заказчика 2026-10-11).
 *
 * Как в приложении: градиент только у шапки, содержимое — на ровном
 * фоне, глубина — тоном (белая карточка на сине-сером фоне), теней нет.
 */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-bar) + 8px); }
body { overflow-x: hidden; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--margin); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--card); padding: 8px 12px; border-radius: var(--radius-control); }
.skip:focus { left: 8px; }

/* ── шапка ─────────────────────────────────────────────────────────── */
/* Над первым экраном шапка — его продолжение: тот же фирменный градиент. */
.site-bar { position: sticky; top: 0; z-index: 5; padding: 0; background: linear-gradient(90deg, var(--brand-dark), var(--brand-main)); }
.site-bar__row { display: flex; align-items: center; gap: 4px; min-height: 64px; padding-right: calc(var(--margin) - 12px); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.site-brand svg { width: 32px; height: 32px; border-radius: 8px; }
.site-nav { display: flex; gap: 4px; margin-right: 8px; }
.site-signin { border: 1px solid rgba(255, 255, 255, .45); }
@media (max-width: 720px) { .site-nav { display: none; } }

/* ── первый экран: фирменный градиент, как витрина приложения ─────── */
.hero {
  position: relative; overflow: hidden; color: var(--brand-on);
  background: linear-gradient(135deg, #14225e 0%, #1e56a8 70%, #2a68c2 100%);
  padding: 56px 0 72px;
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(92, 127, 208, .45), transparent);
}
@media (min-width: 900px) { .hero { padding: 88px 0 104px; } }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.kicker { font: 500 13px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-on-muted); margin-bottom: 14px; }
.hero h1 { font: 700 clamp(34px, 5.4vw, 56px)/1.1 var(--font); letter-spacing: -.02em; }
.lead { font: 400 17px/26px var(--font); color: rgba(255, 255, 255, .88); margin: 18px 0 32px; max-width: 34em; }
@media (min-width: 900px) { .lead { font-size: 19px; line-height: 30px; } }
.btn--hero {
  min-height: 52px; padding: 0 28px; font-size: 16px; background: #fff; color: #14225e;
  box-shadow: 0 8px 24px -8px rgba(5, 10, 30, .5);
}
.btn--hero:hover { background: #e8eeff; }
.btn--hero .ico { width: 20px; height: 20px; }
.hero__meta { margin-top: 16px; font: 400 14px/20px var(--font); color: var(--brand-on-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .btn--hero { width: 100%; } }

/*
 * Устройство: экран «Живые данные» приложения в его ТЁМНОЙ теме
 * (values-night): карточка #232935 на фоне #111318, значения моноширинным,
 * состояние — значком и словом, выход за норму — полосой слева, как
 * в item_livedata_row; кривые — graph_series тёмной темы.
 */
.device {
  --card: #232935; --on-surface: #e3e2e6; --on-surface-variant: #c5c6d0;
  --ok: #7fd99f; --fault: #ffb4ab; --fault-container: #48120e; --grid: rgba(255, 255, 255, .08);
  --series-0: #64b5f6; --series-2: #ba68c8;
  justify-self: center; width: min(100%, 420px); padding: 12px; border-radius: 28px;
  background: #0d1220; transform: rotate(-2deg);
  box-shadow: 0 30px 60px -20px rgba(5, 10, 30, .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--on-surface);
}
@media (max-width: 899px) { .device { transform: none; } }
.device__screen { background: #111318; border-radius: 18px; padding: 12px; display: grid; gap: 8px; }
.device__bar {
  display: flex; align-items: center; gap: 10px; margin: -12px -12px 4px; padding: 12px 14px;
  background: linear-gradient(180deg, #0e1738, #17417e); border-radius: 18px 18px 0 0; color: #fff; font: 700 16px/22px var(--font);
}
.device__logo svg { width: 22px; height: 22px; border-radius: 6px; }
.device__volt { margin-left: auto; font: 400 13px/18px var(--mono); background: rgba(255, 255, 255, .14); padding: 2px 8px; border-radius: 6px; }

.pid {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n v" "s v";
  column-gap: 12px; background: var(--card); border-radius: 12px; padding: 10px 14px; overflow: hidden;
}
.pid--bad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fault); }
.pid__name { grid-area: n; font: 400 13px/18px var(--font); color: var(--on-surface-variant); }
.pid__val { grid-area: v; align-self: center; font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pid__val small { font: 400 12px var(--font); color: var(--on-surface-variant); }
.pid--bad .pid__val { color: var(--fault); }
.pid__state { grid-area: s; display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--font); }
.pid__state .ico { width: 14px; height: 14px; }
.pid__state--ok { color: var(--ok); }
.pid__state--bad { color: var(--fault); }

.graph { background: var(--card); border-radius: 12px; padding: 10px 12px 8px; display: grid; gap: 6px; }
.graph__head { display: flex; align-items: baseline; gap: 8px; }
.graph__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--series-0); flex: none; align-self: center; }
.graph__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--font); color: var(--on-surface-variant); }
.graph__val { font: 500 18px/20px var(--mono); font-variant-numeric: tabular-nums; }
.graph__val small { font: 400 11px var(--font); color: var(--on-surface-variant); }
/* Шкала значений слева — подписи стоят на тех же линиях сетки (8 / 40 / 72 из 80). */
.graph__body { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 80px auto; column-gap: 6px; }
.graph__scale { position: relative; height: 80px; min-width: 24px; font: 400 10px/12px var(--mono); color: var(--on-surface-variant); opacity: .8; }
.graph__scale span { position: absolute; right: 0; transform: translateY(-50%); }
.graph__scale span:nth-child(1) { top: 10%; }
.graph__scale span:nth-child(2) { top: 50%; }
.graph__scale span:nth-child(3) { top: 90%; }
.graph__plot { width: 100%; height: 80px; display: block; }
.graph__grid { stroke: var(--grid); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.graph__line { stroke: var(--series-0); stroke-width: 2.2; fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.graph__axis { grid-column: 2; display: flex; justify-content: space-between; padding-top: 4px; font: 400 10px/12px var(--font); color: var(--on-surface-variant); opacity: .8; }

.dtc { display: flex; align-items: center; gap: 10px; background: var(--fault-container); color: #ffdad6; border-radius: 12px; padding: 10px 12px; font: 400 13px/18px var(--font); }
.dtc .ico { width: 20px; height: 20px; color: var(--fault); }

/* ── разделы ───────────────────────────────────────────────────────── */
.section { padding: 48px 0; }
@media (min-width: 900px) { .section { padding: 64px 0; } }
.section h2 { font: 700 clamp(24px, 3vw, 32px)/1.2 var(--font); letter-spacing: -.01em; }
.section__lead { color: var(--on-surface-variant); font: 400 16px/24px var(--font); margin-top: 8px; max-width: 40em; }

/* Возможности — плитками главного экрана (item_tile). */
.features {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: var(--gap-cards); grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
}
.features .tile__sub { min-height: 0; margin-top: 4px; font-size: 14px; line-height: 20px; letter-spacing: .01786em; }
/* Узкое окно — строками списка, как в приложении: значок слева, текст справа. */
@media (max-width: 599px) { .features .tile { flex-direction: row; align-items: flex-start; min-height: 0; } }

/* Как начать — строками списка: номер в фирменной подложке. */
.steps {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: var(--gap-cards); grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
}
.step { display: flex; gap: 12px; align-items: flex-start; }
.step__n {
  width: 40px; height: 40px; border-radius: var(--radius-control); flex: none; display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary-container); font: 500 16px/24px var(--font);
}
.step p { margin-top: 4px; }

/* ── подвал ────────────────────────────────────────────────────────── */
.site-foot { background: var(--surface); padding: 24px 0; color: var(--on-surface-variant); font: 400 14px/20px var(--font); }
.site-foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.site-foot__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--on-surface); font-weight: 700; letter-spacing: -.01em; }
.site-foot__brand svg { width: 24px; height: 24px; border-radius: 6px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-foot a { color: var(--on-surface-variant); }
.site-foot small { margin-left: auto; font-size: 12px; }
@media (max-width: 600px) { .site-foot small { margin-left: 0; width: 100%; } }