/* ══════════════════════════════════════════════════════════════════════════
   Ракурс — облачное видеонаблюдение. Статическая заглушка.
   Ноль внешних запросов, ноль форм, вся графика — свои файлы в корне.
   Палитра «спокойная надёжность»: белая бумага, стальные чернила, синий акцент.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f4f6f9; --bg-2:#e9eef4; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#eef3f8;
  --ink:#13202c; --ink-2:#283848; --muted:#5d6e7e; --muted-2:#8695a4;
  --line:#e2e8ef; --line-2:#cdd8e3;
  --accent:#1b5fa8; --accent-hi:#2a7bd4; --accent-soft:#e9f1fa;
  --ok:#2c9468; --warn:#b8821f; --bad:#bf4f39;
  --dark:#0f1a24; --dark-2:#16242f; --on-dark:#e9eff5; --on-dark-muted:#9aa9b7; --on-dark-line:rgba(255,255,255,.12);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --wrap:1180px; --head:64px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(19,32,44,.04), 0 8px 24px rgba(19,32,44,.06);
}

*{ margin:0; padding:0; box-sizing:border-box }
html{ color-scheme:light; scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
svg{ display:block }
img{ max-width:100%; height:auto; display:block }
ul{ list-style:none }
:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; border-radius:4px }
::selection{ background:var(--accent-soft) }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* ── типографика ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-weight:640; letter-spacing:-.025em; line-height:1.12 }
.h-xl{ font-size:clamp(32px,4.6vw,52px) }
.h-l{ font-size:clamp(26px,3.2vw,38px) }
.h-m{ font-size:clamp(21px,2.2vw,27px) }
.lead{ font-size:17px; color:var(--muted); max-width:62ch }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.kicker::before{ content:""; width:14px; height:1px; background:var(--accent); flex:none }
.muted{ color:var(--muted) }
.mono{ font-family:var(--mono); font-size:13px }

/* ── кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:var(--r-sm);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none }
.btn--fill{ background:var(--accent); color:#fff }
.btn--fill:hover{ background:var(--accent-hi) }
.btn--line{ border:1px solid var(--line-2); color:var(--ink); background:var(--surface) }
.btn--line:hover{ border-color:var(--accent); color:var(--accent) }
.btn--sm{ min-height:38px; padding:0 14px; font-size:14px }
.btn--lg{ min-height:50px; padding:0 26px; font-size:16px }
.btn--soon{ background:var(--surface-3); color:var(--muted-2); cursor:default; border:1px dashed var(--line-2) }
.on-dark .btn--line{ border-color:var(--on-dark-line); color:var(--on-dark); background:transparent }
.on-dark .btn--line:hover{ border-color:var(--on-dark); color:#fff }

/* ── шапка ───────────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60; height:var(--head);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top__in{ height:100%; display:flex; align-items:center; gap:28px }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; flex:none; min-height:40px }
.brand img{ width:30px; height:30px }
.brand__name{ font-size:18px; font-weight:700; letter-spacing:-.02em }
.brand__name span{ color:var(--accent) }
.nav{ display:flex; align-items:center; gap:2px }
.nav a{
  padding:8px 12px; border-radius:var(--r-sm); font-size:14.5px; color:var(--muted);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover{ color:var(--ink); background:var(--surface-3) }
.nav a.is-here{ color:var(--ink); font-weight:600 }
.top__act{ display:flex; align-items:center; gap:8px; flex:none }
.burger{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--ink) }
.burger:hover{ background:var(--surface-3) }
.sheet{
  position:fixed; inset:var(--head) 0 auto 0; z-index:55;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:var(--s4) 24px var(--s5); display:none; box-shadow:var(--shadow);
}
.sheet.is-open{ display:block }
.sheet a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); font-size:16px }
.sheet a:last-of-type{ border-bottom:0 }
.sheet .btn{ width:100%; margin-top:var(--s4) }

/* ── секции ──────────────────────────────────────────────────────────────── */
.sec{ padding:var(--s9) 0 }
.sec--sm{ padding:var(--s7) 0 }
.sec--tint{ background:var(--bg-2) }
.sec--paper{ background:var(--surface) }
.sec--dark{ background:var(--dark); color:var(--on-dark) }
.sec--dark .lead, .sec--dark .muted{ color:var(--on-dark-muted) }
.sec--dark .kicker{ color:#7fb4e8 }
.sec--dark .kicker::before{ background:#7fb4e8 }
.head{ max-width:700px; margin-bottom:var(--s7) }
.head .h-l{ margin:12px 0 14px }
.head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); max-width:none }

/* ── герой ───────────────────────────────────────────────────────────────── */
.hero{ padding:var(--s8) 0 var(--s9); background:linear-gradient(180deg,var(--surface),var(--bg)) }
.hero__in{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:var(--s7); align-items:center }
.hero h1{ margin:14px 0 18px }
.hero .lead{ font-size:18px }
.hero__act{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6) }
.hero__note{ margin-top:var(--s4); font-size:13.5px; color:var(--muted-2) }

/* рамка вокруг снимков интерфейса */
.shot{
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden;
}
.shot__bar{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.shot__dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2) }
.shot__name{ margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted-2) }
.shot img{ width:100% }

/* ── полоса доверия ──────────────────────────────────────────────────────── */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) }
.fact b{ display:block; font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--ink) }
.fact span{ font-size:13.5px; color:var(--muted) }

/* ── карточки ────────────────────────────────────────────────────────────── */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4) }
.card{
  display:flex; flex-direction:column; min-width:0;
  padding:var(--s5); border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow) }
.card h3{ font-size:17px; margin-bottom:8px }
.card p{ font-size:14.5px; color:var(--muted) }
.card__ico{
  width:38px; height:38px; margin-bottom:var(--s4); border-radius:10px; flex:none;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
}
.card__ico svg{ width:20px; height:20px }
.card__shot{ margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s5); border-bottom:1px solid var(--line) }
.card__shot img{ width:100% }
.sec--dark .card{ background:var(--dark-2); border-color:var(--on-dark-line) }
.sec--dark .card p{ color:var(--on-dark-muted) }
.sec--dark .card__ico{ background:rgba(127,180,232,.12); color:#7fb4e8 }

/* ── шаги ────────────────────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) }
.step{ padding-top:var(--s4); border-top:2px solid var(--accent) }
.step b{ display:block; font-family:var(--mono); font-size:12px; color:var(--accent); margin-bottom:8px }
.step h3{ font-size:17px; margin-bottom:6px }
.step p{ font-size:14.5px; color:var(--muted) }

/* ── список галочек ──────────────────────────────────────────────────────── */
.ticks{ display:grid; gap:10px; margin-top:var(--s4) }
.ticks li{ position:relative; padding-left:26px; font-size:15px; color:var(--muted) }
.ticks li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:9px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg); border-radius:1px;
}
.sec--dark .ticks li::before{ border-color:#7fb4e8 }

/* ── разворот: текст + картинка ──────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7); align-items:center }
.split--flip .split__text{ order:2 }
.split h2{ margin:12px 0 14px }
.split p{ color:var(--muted) }

/* ── тарифы ──────────────────────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:start }
.plan{ padding:var(--s5); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line) }
.plan--pick{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.plan__tag{ display:inline-block; margin-bottom:var(--s3); padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; background:var(--accent-soft); color:var(--accent) }
.plan h3{ font-size:19px }
.plan__price{ margin:var(--s3) 0 4px; font-size:34px; font-weight:700; letter-spacing:-.03em }
.plan__price span{ font-size:15px; font-weight:500; color:var(--muted) }
.plan__note{ font-size:13.5px; color:var(--muted-2); min-height:38px }
.plan .btn{ width:100%; margin:var(--s4) 0 }
.plan .ticks li{ font-size:14.5px }

/* таблица сравнения */
.table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.table th, .table td{ padding:14px 16px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line) }
.table th{ background:var(--surface-2); font-weight:600; font-size:13.5px; letter-spacing:.01em }
.table td:not(:first-child), .table th:not(:first-child){ text-align:center }
.table tr:last-child td{ border-bottom:0 }
.table td:first-child{ color:var(--muted) }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ── статус площадок ─────────────────────────────────────────────────────── */
.status-row{ display:flex; align-items:center; gap:var(--s4); padding:14px var(--s5); border-bottom:1px solid var(--line) }
.status-row:last-child{ border-bottom:0 }
.status-row b{ font-size:15px; font-weight:600; min-width:190px }
.status-row span{ font-size:14px; color:var(--muted) }
.dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--ok) }
.dot--warn{ background:var(--warn) }
.pill{ margin-left:auto; padding:4px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; background:rgba(44,148,104,.10); color:var(--ok) }
.pill--warn{ background:rgba(184,130,31,.12); color:var(--warn) }
.bars{ display:flex; gap:3px; align-items:flex-end; height:26px }
.bars i{ width:6px; border-radius:2px; background:var(--ok); opacity:.85 }
.bars i.w{ background:var(--warn) }

/* ── текстовые страницы ──────────────────────────────────────────────────── */
.page-head{ padding:var(--s7) 0 var(--s6); background:var(--surface); border-bottom:1px solid var(--line) }
.crumb{ font-size:13px; color:var(--muted-2); margin-bottom:var(--s3) }
.crumb a:hover{ color:var(--accent) }
.prose{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--s7); align-items:start }
.prose__body{ min-width:0 }
.prose__body h2{ font-size:22px; margin:var(--s6) 0 var(--s3) }
.prose__body h2:first-child{ margin-top:0 }
.prose__body h3{ font-size:17px; margin:var(--s5) 0 var(--s2) }
.prose__body p{ margin-bottom:var(--s3); color:var(--ink-2) }
.prose__body ul{ margin:0 0 var(--s4); display:grid; gap:8px }
.prose__body li{ position:relative; padding-left:18px; color:var(--muted) }
.prose__body li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:2px; border-radius:2px; background:var(--accent) }
.prose__body ol{ margin:0 0 var(--s4) 20px; display:grid; gap:8px; color:var(--muted) }
.prose__body code{ font-family:var(--mono); font-size:13px; background:var(--surface-3); padding:2px 6px; border-radius:6px }
.prose__body pre{
  margin:0 0 var(--s4); padding:var(--s4); border-radius:var(--r); overflow-x:auto;
  background:var(--dark); color:#dbe6f0; font-family:var(--mono); font-size:13px; line-height:1.65;
}
.prose__body pre code{ background:none; padding:0; color:inherit }
.toc{ position:sticky; top:calc(var(--head) + 24px); padding:var(--s4); border-radius:var(--r); background:var(--surface); border:1px solid var(--line) }
.toc b{ display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); margin-bottom:10px }
.toc a{ display:block; padding:8px 0; font-size:14px; color:var(--muted) }
.toc a:hover{ color:var(--accent) }
.note{ padding:var(--s4); border-radius:var(--r); background:var(--accent-soft); border:1px solid rgba(27,95,168,.16); font-size:14.5px; margin-bottom:var(--s4) }

/* ── вопросы ─────────────────────────────────────────────────────────────── */
.qa-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); align-items:start }
.qa-col{ display:flex; flex-direction:column; gap:var(--s4); min-width:0 }
.qa{ border-radius:var(--r); background:var(--surface); border:1px solid var(--line); overflow:hidden }
.qa[open]{ border-color:var(--line-2) }
.qa summary{ display:flex; align-items:center; gap:var(--s4); padding:18px var(--s5); font-size:15.5px; font-weight:600; cursor:pointer; list-style:none }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:""; margin-left:auto; flex:none; width:10px; height:10px;
  border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s var(--ease), border-color .2s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); border-color:var(--accent) }
.qa__body{ padding:0 var(--s5); color:var(--muted); font-size:14.5px; overflow:hidden; height:0; transition:height .3s var(--ease) }
.qa__body::after{ content:""; display:block; height:var(--s5) }
.qa[open] .qa__body{ height:auto }
.qa.idet .qa__body{ height:0 }

/* ── полоса призыва ──────────────────────────────────────────────────────── */
.band{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  padding:var(--s6); border-radius:var(--r-lg); background:var(--dark); color:var(--on-dark);
}
.band h3{ font-size:22px }
.band p{ margin-top:6px; font-size:14.5px; color:var(--on-dark-muted) }
.band .btn--fill{ background:#fff; color:var(--dark) }
.band .btn--fill:hover{ background:var(--accent-soft) }

/* ── статьи ──────────────────────────────────────────────────────────────── */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.post{ display:flex; flex-direction:column; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:border-color .18s var(--ease), box-shadow .18s var(--ease) }
.post:hover{ border-color:var(--line-2); box-shadow:var(--shadow) }
.post img{ width:100%; border-bottom:1px solid var(--line) }
.post__t{ padding:var(--s5) }
.post__date{ font-family:var(--mono); font-size:12px; color:var(--muted-2) }
.post h3{ font-size:17px; margin:8px 0 8px }
.post p{ font-size:14.5px; color:var(--muted) }

/* ── контакты ────────────────────────────────────────────────────────────── */
.kont{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.kont div{ padding:var(--s5); border-radius:var(--r); background:var(--surface); border:1px solid var(--line) }
.kont b{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:10px }
.kont p{ font-size:15.5px }
.kont a{ color:var(--accent) }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.oops{ min-height:58vh; display:grid; place-items:center; text-align:center; padding:var(--s9) 0 }
.oops__code{ font-family:var(--mono); font-size:15px; color:var(--accent); letter-spacing:.14em }
.oops h1{ margin:var(--s4) 0 var(--s3) }
.oops .btn{ margin-top:var(--s5) }

/* ── подвал ──────────────────────────────────────────────────────────────── */
.foot{ background:var(--surface); border-top:1px solid var(--line); padding:var(--s8) 0 var(--s5) }
.foot__grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--s6) }
.foot__about{ font-size:14px; color:var(--muted); margin-top:var(--s4); max-width:34ch }
.foot__t{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin-bottom:var(--s3) }
.foot__links{ display:grid; gap:2px }
.foot__links a, .foot__links span{ display:inline-block; padding:7px 0; font-size:14.5px; color:var(--muted) }  /* палец попадает: цель 33 px */
.foot__links a:hover{ color:var(--accent) }
.foot__bottom{
  margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:13.5px; color:var(--muted-2);
}

/* ── ширины ──────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero__in{ grid-template-columns:1fr; gap:var(--s6) }
  .split{ gap:var(--s6) }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:var(--s5) }
  .prose{ grid-template-columns:1fr }
  .toc{ position:static }
}
@media (max-width:1100px){
  /* шесть пунктов меню и две кнопки не влезают уже на 1024 — уходим в бургер */
  .nav{ display:none }
  .burger{ display:flex }
  .top__act .btn--line{ display:none }
}
@media (max-width:900px){
  .posts, .steps, .plans, .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:768px){
  .sec{ padding:var(--s8) 0 }
  .facts{ grid-template-columns:repeat(2,1fr); gap:var(--s5) }
  .split{ grid-template-columns:1fr }
  .split--flip .split__text{ order:0 }
  .head--row{ flex-direction:column; align-items:flex-start }
}
@media (max-width:620px){
  .posts, .steps, .plans, .grid-3, .grid-2, .grid-4, .kont{ grid-template-columns:1fr }
  .qa-cols{ display:flex; flex-direction:column }
  .qa-col{ display:contents }
  .qa-col:first-child > .qa:nth-child(1){ order:1 } .qa-col:last-child > .qa:nth-child(1){ order:2 }
  .qa-col:first-child > .qa:nth-child(2){ order:3 } .qa-col:last-child > .qa:nth-child(2){ order:4 }
  .qa-col:first-child > .qa:nth-child(3){ order:5 } .qa-col:last-child > .qa:nth-child(3){ order:6 }
  .foot__grid{ grid-template-columns:1fr }
  .hero{ padding:var(--s7) 0 var(--s8) }
  .band{ padding:var(--s5) }
  .band .btn{ width:100% }
  .status-row{ flex-wrap:wrap; gap:var(--s3) }
  .status-row b{ min-width:0 }
}

/* ── вход по коду устройства ─────────────────────────────────────────────── */
.vhod{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:center }
.vhod__karta{
  padding:var(--s6); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.pole{ display:block }
.pole__lab{ display:block; font-size:13px; color:var(--muted); margin-bottom:8px }
.pole__vvod{
  width:100%; height:54px; padding:0 16px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface-2);
  font-family:var(--mono); font-size:18px; letter-spacing:.08em; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.pole__vvod::placeholder{ color:var(--muted-2); letter-spacing:.08em }
.pole__vvod:focus{ outline:none; border-color:var(--accent); background:var(--surface) }
.vhod__otvet{ margin-top:14px; min-height:40px; font-size:14.5px; line-height:1.5; color:var(--bad) }
.vhod__otvet:empty{ min-height:0 }
.vhod__otvet.est{ color:var(--muted) }
@media (max-width:860px){ .vhod{ grid-template-columns:1fr } }