/* ============================================================
   «ПОЛЕВОЙ КОМПАС» — военный терминальный интерфейс
   Палитра: фосфорный зелёный на почти чёрной оливе
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/oswald-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — почти чёрная олива, 5 уровней */
  --bg:        #070a07;
  --surface:   #0c110c;
  --surface-2: #111811;
  --surface-3: #162016;
  --line:      #1e2a1e;
  --line-2:    #2a3a2a;

  /* Text */
  --text:       #d6e2d0;
  --text-muted: #8ba287;
  --text-faint: #5c7059;

  /* Accents */
  --acc:        #9fe870;  /* фосфорный зелёный */
  --acc-dim:    #6faf4c;
  --acc-glow:   rgba(159, 232, 112, 0.14);
  --acc-wash:   rgba(159, 232, 112, 0.05);
  --amber:      #e3a742;  /* цена, внимание */
  --red:        #e06055;  /* SOS, ошибки */
  --ok:         #79c977;

  /* Type scale */
  --text-xs:   clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  --text-sm:   clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl:   clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --text-2xl:  clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --text-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);

  /* Spacing 4px */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --w-default: 1200px;
  --w-narrow: 820px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], [id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--acc); color: #081008; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.wrap { max-width: var(--w-default); margin-inline: auto; padding-inline: clamp(var(--s4), 4vw, var(--s8)); }

/* Скринридерам */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* focus */
:focus-visible { outline: 1px solid var(--acc); outline-offset: 3px; }

/* ---------- Глобальный слой сканлайнов ---------- */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0, 0, 0, 0.12) 2px 4px
  );
  mix-blend-mode: multiply;
}

/* ---------- Header ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--acc); }
.brand svg { color: var(--acc); flex: none; }

.nav {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a { color: var(--text-muted); padding: var(--s2) 0; }
.nav a:hover { color: var(--acc); text-decoration: none; }

.net-status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--text-faint);
  white-space: nowrap;
}
.net-status b { color: var(--ok); font-weight: 400; }
.net-dot {
  width: 7px; height: 7px;
  background: var(--ok);
  border-radius: 50%;
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border: 1px solid var(--line-2);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--acc-dim); color: var(--acc); text-decoration: none; }
.btn-acc {
  background: var(--acc);
  border-color: var(--acc);
  color: #0a120a;
}
.btn-acc:hover {
  background: #b3f18b;
  border-color: #b3f18b;
  color: #0a120a;
  box-shadow: 0 0 24px var(--acc-glow);
}
.btn-sm { padding: var(--s2) var(--s4); font-size: var(--text-xs); }

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(56px + clamp(var(--s10), 8vw, var(--s20)));
  padding-bottom: clamp(var(--s10), 7vw, var(--s16));
  background:
    linear-gradient(to bottom, rgba(7, 10, 7, 0.55), rgba(7, 10, 7, 0.92) 78%, var(--bg)),
    url('assets/img/bg-topo.webp') center / cover no-repeat;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: center;
}
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 var(--s4);
}
.eyebrow::before { content: '// '; color: var(--text-faint); }
h1.hero-title {
  font-size: var(--text-hero);
  font-weight: 600;
  color: #eef5ea;
}
h1 .acc { color: var(--acc); }
.hero-sub {
  margin: var(--s5) 0 0;
  max-width: 56ch;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.hero-sub b { color: var(--text); font-weight: 500; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

.hero-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(var(--s8), 5vw, var(--s12));
}
.chip {
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  padding: var(--s4) var(--s5);
}
.chip dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s1);
}
.chip dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}
.chip dd.price { color: var(--amber); font-weight: 500; }

/* терминальное окно */
.term {
  border: 1px solid var(--line-2);
  background: rgba(9, 13, 9, 0.86);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.5), 0 0 90px var(--acc-wash);
  position: relative;
}
.term-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.term-head::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--acc);
  box-shadow: 14px 0 0 var(--amber), 28px 0 0 var(--line-2);
  margin-right: 28px;
}
.term-body { padding: var(--s4) var(--s5); font-size: var(--text-sm); min-height: 178px; }
.term-body .ln { display: block; white-space: pre-wrap; }
.term-body .ln .p { color: var(--text-faint); }
.term-body .ln .ok { color: var(--ok); }
.term-body .ln .warn { color: var(--amber); }
.cursor {
  display: inline-block;
  width: 0.6em; height: 1.05em;
  background: var(--acc);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-visual { position: relative; }
.hero-visual .frame-img { margin-top: var(--s4); }

/* Рамка с уголками */
.frame-img { position: relative; border: 1px solid var(--line); }
.frame-img img { width: 100%; }
.corner::before, .corner::after,
.corner > i::before, .corner > i::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--acc-dim);
  z-index: 2;
}
.corner::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner > i::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner > i::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.img-tag {
  position: absolute;
  left: var(--s3); bottom: var(--s3);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
  background: rgba(7, 10, 7, 0.78);
  border: 1px solid var(--line-2);
  padding: var(--s1) var(--s3);
}

/* ---------- Ticker ---------- */
.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  padding: var(--s3) 0;
}
.ticker-in {
  display: flex;
  gap: var(--s10);
  white-space: nowrap;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  animation: ticker 46s linear infinite;
  width: max-content;
}
.ticker-in span::after { content: ' ▪'; color: var(--acc-dim); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(var(--s16), 9vw, var(--s24)); position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-alt { background: var(--surface); }

.sec-head { margin-bottom: clamp(var(--s8), 5vw, var(--s12)); max-width: 72ch; }
.sec-head h2 { font-size: var(--text-2xl); color: #e9f1e4; }
.sec-head .lead { color: var(--text-muted); margin: var(--s4) 0 0; max-width: 62ch; }
.sec-head .lead b { color: var(--text); font-weight: 500; }

/* ---------- Принцип: шаги ---------- */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 240px;
}
.step:nth-child(even) .step-media { order: 2; }
.step-media {
  position: relative;
  border-inline-end: 1px solid var(--line);
  min-height: 200px;
}
.step:nth-child(even) .step-media { border-inline-end: 0; border-inline-start: 1px solid var(--line); }
.step-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.step-body { padding: clamp(var(--s5), 3vw, var(--s8)); align-self: center; }
.step-num {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--acc);
  display: block;
  margin-bottom: var(--s2);
}
.step-body h3 { font-size: var(--text-xl); margin-bottom: var(--s3); }
.step-body p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); max-width: 58ch; }
.step-note {
  margin-top: var(--s3);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.step-note::before { content: '! '; color: var(--amber); }

/* ---------- ПМ-1 ---------- */
.pm-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(var(--s6), 4vw, var(--s12));
  align-items: start;
}
.spec-block { border: 1px solid var(--line); background: var(--surface); }
.spec-block h3 {
  font-size: var(--text-lg);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  color: var(--acc);
}
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.spec-table th, .spec-table td { text-align: left; padding: var(--s3) var(--s5); vertical-align: top; }
.spec-table tr + tr { border-top: 1px dashed var(--line); }
.spec-table th {
  font-weight: 400;
  color: var(--text-faint);
  white-space: nowrap;
  width: 38%;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-table td { color: var(--text); }

.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s4);
  border: 1px solid var(--line-2);
  background: var(--acc-wash);
  padding: var(--s5) var(--s6);
  margin-top: var(--s5);
}
.price-line .lbl { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.price-line .val { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--amber); line-height: 1; }
.price-line .note { font-size: var(--text-xs); color: var(--text-faint); flex-basis: 100%; }

/* ---------- Возможности ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feat {
  background: var(--bg);
  padding: var(--s6) var(--s5);
  position: relative;
  transition: background 180ms var(--ease);
}
.feat:hover { background: var(--surface-2); }
.feat-code {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--s3);
}
.feat h3 { font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--s2); text-transform: none; letter-spacing: 0; font-family: var(--font-mono); color: var(--acc); }
.feat p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- Защита ---------- */
.shield-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s6), 4vw, var(--s12));
  align-items: start;
}
.shield-list { display: grid; gap: var(--s4); }
.shield-item {
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc-dim);
  background: var(--surface);
  padding: var(--s5) var(--s6);
}
.shield-item h3 { font-size: var(--text-base); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); margin-bottom: var(--s2); }
.shield-item p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.shield-warn {
  border: 1px dashed var(--line-2);
  padding: var(--s4) var(--s5);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.shield-warn::before { content: '⚠ '; color: var(--amber); }

/* ---------- Досье (ТТХ) ---------- */
.dossier { border: 1px solid var(--line); background: var(--surface); }
.dossier details { border-top: 1px solid var(--line); }
.dossier details:first-child { border-top: 0; }
.dossier summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-lg);
  color: #dfe9d9;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.dossier summary::-webkit-details-marker { display: none; }
.dossier summary:hover { color: var(--acc); background: var(--surface-2); }
.dossier summary .idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--acc); letter-spacing: 0.16em; }
.dossier summary .tgl { margin-left: auto; font-family: var(--font-mono); color: var(--text-faint); font-size: var(--text-sm); }
.dossier details[open] summary .tgl::before { content: '[−]'; }
.dossier details:not([open]) summary .tgl::before { content: '[+]'; }
.dossier .d-body { padding: 0 var(--s6) var(--s6); color: var(--text-muted); font-size: var(--text-sm); }
.d-body h4 { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--acc); margin: var(--s5) 0 var(--s2); text-transform: uppercase; letter-spacing: 0.1em; }
.d-body p { margin: var(--s2) 0; max-width: 75ch; }
.d-body ul { margin: var(--s2) 0; padding-left: 1.4em; }
.d-body li { margin: var(--s1) 0; }
.d-body li::marker { color: var(--acc-dim); }
.d-route {
  font-size: var(--text-sm);
  color: var(--acc);
  border: 1px dashed var(--line-2);
  background: var(--bg);
  display: inline-block;
  padding: var(--s2) var(--s4);
  margin-top: var(--s3);
}
.status-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.tag {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  padding: var(--s1) var(--s3);
  color: var(--text-muted);
}
.tag.on { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); }
.tag.stale { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 40%, transparent); }
.tag.off { color: var(--text-faint); }

/* ---------- Таблицы сравнения ---------- */
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.cmp th, .cmp td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--text-muted); }
.cmp td:first-child { color: var(--text); }
.cmp tr.hl { background: var(--acc-wash); }
.cmp tr.hl td { color: var(--text); }
.cmp tr.hl td:first-child { color: var(--acc); }
.cmp .compare-price { color: var(--amber); font-weight: 500; white-space: nowrap; }
.tbl-note { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--s3); max-width: 90ch; }

/* ---------- Статус изделий ---------- */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s4); }
.unit {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--s5) var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  position: relative;
}
.unit-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.unit-head h3 { font-size: var(--text-lg); }
.unit p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); flex: 1; }
.unit-meta { font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.08em; }
.pill {
  margin-left: auto;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px var(--s3);
  border: 1px solid;
  white-space: nowrap;
}
.pill-live { color: var(--acc); border-color: var(--acc-dim); background: var(--acc-wash); }
.pill-dev { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 45%, transparent); }
.pill-plan { color: var(--text-faint); border-color: var(--line-2); }
.unit-price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--amber); }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); background: var(--surface); max-width: var(--w-narrow); }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s6);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  display: flex;
  gap: var(--s3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '>'; color: var(--acc); flex: none; }
.faq summary:hover { color: var(--acc); }
.faq .f-body { padding: 0 var(--s6) var(--s5) calc(var(--s6) + 1.35ch); font-size: var(--text-sm); color: var(--text-muted); max-width: 75ch; }
.faq .f-body p { margin: 0 0 var(--s2); }

/* ---------- Калькулятор ---------- */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s6), 4vw, var(--s12));
  align-items: start;
}
.calc {
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: clamp(var(--s5), 3vw, var(--s8));
}
.calc-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.calc-row .lbl { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.count-ctl { display: flex; align-items: stretch; border: 1px solid var(--line-2); }
.count-ctl button {
  font-family: var(--font-mono);
  background: var(--surface-2);
  color: var(--acc);
  border: 0;
  width: 44px; height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
}
.count-ctl button:hover { background: var(--surface-3); }
.count-ctl output {
  display: flex; align-items: center; justify-content: center;
  min-width: 72px;
  font-size: var(--text-lg);
  color: var(--text);
  border-inline: 1px solid var(--line-2);
  padding-inline: var(--s3);
}
.calc-out { margin-top: var(--s6); border-top: 1px dashed var(--line-2); padding-top: var(--s5); font-size: var(--text-sm); }
.calc-out .row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s1) 0; color: var(--text-muted); }
.calc-out .row.disc { color: var(--ok); }
.calc-out .row.disc[hidden] { display: none; }
.calc-out .row.total {
  color: var(--text);
  border-top: 1px solid var(--line-2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  font-size: var(--text-lg);
}
.calc-out .row.total b { color: var(--amber); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.calc-hint { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--s4); }
.calc .btn-acc { width: 100%; margin-top: var(--s6); }

.levels-tbl th { white-space: normal; }

/* ---------- Privacy ---------- */
.privacy-body { max-width: var(--w-narrow); color: var(--text-muted); font-size: var(--text-sm); }
.privacy-body h3 { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: var(--text-base); font-weight: 500; color: var(--text); margin: var(--s6) 0 var(--s2); }
.privacy-body h3::before { content: '§ '; color: var(--acc-dim); }
.privacy-body p { margin: var(--s2) 0; max-width: 75ch; }
.privacy-date { font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(var(--s10), 6vw, var(--s16)) 0 var(--s8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(var(--s6), 4vw, var(--s12));
}
.foot-grid h3 { font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: var(--s3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { padding: var(--s1) 0; }
.foot-grid a { color: var(--text-muted); }
.foot-grid a:hover { color: var(--acc); }
.foot-note { font-size: var(--text-xs); color: var(--text-faint); max-width: 52ch; margin-top: var(--s4); }
.foot-bottom {
  margin-top: clamp(var(--s8), 5vw, var(--s12));
  border-top: 1px dashed var(--line);
  padding-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transition: opacity 700ms var(--ease); }
.rv.in { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: fixed;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    padding: var(--s4) var(--s6) var(--s6);
    z-index: 99;
  }
  .nav.open a { padding: var(--s3) 0; border-bottom: 1px dashed var(--line); font-size: var(--text-sm); }
  .burger { display: block; }
  .net-status { display: none; }
  .topbar .btn-cta-top { margin-left: 0; }
  .hero-grid, .pm-grid, .shield-grid, .calc-grid { grid-template-columns: 1fr; }
  .step, .step:nth-child(even) { grid-template-columns: 1fr; }
  .step-media, .step:nth-child(even) .step-media {
    order: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    min-height: 0;
    position: relative;
    aspect-ratio: 16 / 9;
  }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .topbar .btn-cta-top { display: none; }
  .cmp { min-width: 560px; }
}

/* ---------- Полоса больших цифр (стат-строка) ---------- */
.stats-strip {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.stats-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border-inline: 1px solid var(--line);
}
.stat {
  background: var(--bg);
  padding: clamp(var(--s5), 3vw, var(--s8)) var(--s5);
  text-align: left;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--acc);
}
.stat b.amber { color: var(--amber); }
.stat span {
  display: block;
  margin-top: var(--s2);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Радар (CSS-анимация) ---------- */
.radar {
  --rsize: clamp(180px, 22vw, 260px);
  position: relative;
  width: var(--rsize); height: var(--rsize);
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle, transparent 0 32%, var(--line) 32% calc(32% + 1px), transparent calc(32% + 1px) 65%, var(--line) 65% calc(65% + 1px), transparent calc(65% + 1px)),
    linear-gradient(var(--line) 1px, transparent 1px 100%) center / 100% 50.5%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px 100%) center / 50.5% 100%,
    radial-gradient(circle at center, var(--acc-wash), transparent 70%);
  background-repeat: no-repeat;
  overflow: hidden;
  flex: none;
}
.radar::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(159, 232, 112, 0.35), transparent 70deg, transparent 360deg);
  animation: sweep 4.5s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.radar i {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--acc);
  animation: pulse 3s infinite;
}
.radar i:nth-child(1) { top: 28%; left: 62%; animation-delay: .4s; }
.radar i:nth-child(2) { top: 58%; left: 34%; animation-delay: 1.3s; }
.radar i:nth-child(3) { top: 70%; left: 66%; animation-delay: 2.1s; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.radar em {
  position: absolute;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.radar em:nth-of-type(1) { top: 6px; left: 50%; transform: translateX(-50%); }
.radar em:nth-of-type(2) { bottom: 6px; left: 50%; transform: translateX(-50%); }

.sec-head-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--s6), 4vw, var(--s12));
  flex-wrap: wrap;
}
.sec-head-flex .sec-head { margin-bottom: 0; }

/* ---------- Терминальный блок «жизнь пакета» ---------- */
.pipe { margin-top: clamp(var(--s8), 5vw, var(--s12)); }
.pipe .term-body { min-height: 0; }
.pipe .ln { padding: 2px 0; }
.pipe .cmd { color: var(--text); }
.pipe .cmd::before { content: '$ '; color: var(--acc); }
.pipe .out { color: var(--text-muted); }
.pipe .out .st { color: var(--ok); }
.pipe .out .age { color: var(--amber); }

/* ---------- Сравнение: группы ---------- */
.cmp-sub {
  margin: var(--s10) 0 var(--s4);
  font-size: var(--text-xl);
  color: #e9f1e4;
}
.cmp-sub small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-top: var(--s2);
  text-transform: uppercase;
}
.cmp tr.mil td { color: var(--text-faint); }
.cmp tr.mil td:first-child { color: var(--text-muted); }
.cmp .na { color: var(--text-faint); white-space: nowrap; }

@media (max-width: 960px) {
  .sec-head-flex .radar { display: none; }
}