/* СКОР — главная, светлая тема.
   Вёрстка по ../макет.png. Проектная ширина 1440, контент 1320, поля 60.
   Макет отдан превью 1086px = 0.754 от проектной ширины.
   Размеры ниже сверены поблочно: ../_сверка/сравнение/. */

:root{
  --blue:        #0A56FC;
  --blue-strong: #0846E8;
  --blue-soft:   #EEF3FE;
  --orange:      #F2551A;
  --orange-soft: #FEF0EA;

  --ink:      #1A1F2C;
  --ink-soft: #252A38;
  --muted:    #6A7080;
  --muted-2:  #8A909C;

  --bg:       #FFFFFF;
  --bg-soft:  #F7F9FC;
  --line:     #E7EBF2;
  --line-2:   #EDF1F7;

  --ok:    #22C55E;
  --warn:  #F5B400;
  --alarm: #EF4444;

  --radius:    10px;
  --radius-lg: 14px;
  --container: 1440px;
  --pad:       48px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.035);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- иконки ---------- */
.ic{
  width:20px; height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.ic__badge{ fill:currentColor; stroke:none; }
.ic--play circle{ fill:currentColor; stroke:none; }
.ic--play path{ fill:#fff; stroke:none; }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 24px;
  height:48px;
  border-radius:9px;
  font-size:15.5px;
  font-weight:600;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn .ic{ width:17px; height:17px; }
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-strong); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:#C9D5EA; }
.btn--ghost .ic--play{ color:var(--blue); width:22px; height:22px; }
.btn--sm{ height:44px; padding:0 22px; font-size:14.5px; }
.btn--lg{ height:46px; padding:0 24px; font-size:15px; }

/* ---------- шапка ---------- */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-2);
}
.header__inner{
  display:flex;
  align-items:center;
  min-height:63px;   /* было 90 — ужали на 30 % (Роман 06.09) */
}
.logo img{ width:215px; height:auto; }

.nav{
  display:flex;
  align-items:center;
  gap:46px;
  margin-left:110px;
  margin-right:auto;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
}
.nav a{ padding:6px 0; transition:color .15s ease; }
.nav a:hover{ color:var(--blue); }

.burger{
  display:none;
  width:42px; height:42px;
  margin-left:auto;
  padding:0;
  background:none;
  border:1px solid var(--line);
  border-radius:9px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:17px; height:2px;
  margin:3px auto;
  background:var(--ink);
  border-radius:2px;
}

/* ---------- первый экран ---------- */
.hero{
  position:relative;
  padding:16px 0 7px;
  overflow:hidden;
  background:
    radial-gradient(760px 420px at 86% 6%, #EFF4FF 0%, rgba(239,244,255,0) 70%),
    linear-gradient(180deg,#FBFCFF 0%, #FFFFFF 72%);
}
.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
  gap:24px;
  align-items:center;
}

.kicker{
  margin-bottom:15px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
}
.hero__title{
  font-size:45px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.022em;
}
.hero__title .accent{ color:var(--blue); }

.hero__lead{
  max-width:530px;
  margin-top:17px;
  font-size:17px;
  line-height:1.58;
  color:var(--muted);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:23px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
  max-width:565px;
}
.stat{
  padding:13px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.stat__num{
  font-size:33px;
  font-weight:800;
  color:var(--blue);
  line-height:1.1;
  letter-spacing:-.015em;
}
.stat__label{
  margin-top:5px;
  font-size:13px;
  line-height:1.38;
  color:var(--muted);
}

/* картинка выходила за правую вертикаль контента — вписываем в колонку (Роман 06.09) */
.hero__media{ margin-right:0; }
.hero__media img{
  width:100%;
  border-radius:var(--radius-lg);
}

/* ---------- секции ---------- */
.section{ padding:13px 0; }
/* Стык hero и первой секции: отступ был вдвое больше нужного (Роман 06.09) */
#about.section{ padding-top:6px; }
.section--cta{ padding:12px 0 22px; }

.h2{
  margin-bottom:14px;
  font-size:25px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.018em;
}

.grid{ display:grid; gap:27px; }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.grid--tight{ gap:12px; }
.panel .grid--3{
  /* было minmax(0,1.32fr) в средней колонке — с макета; карточки получались разной
     ширины и ряд смотрелся неровно, ставим равные (Роман 06.09) */
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card{
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.card__title{
  font-size:16.5px;
  font-weight:700;
  line-height:1.28;
}
.card__text{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

/* боли */
.card--pain{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:18px;
  min-height:138px;
}
.pain__icon{
  color:var(--orange);
  flex:none;
  padding-top:4px;
}
.pain__icon .ic{ width:78px; height:78px; stroke-width:1.45; }
.card--pain .card__body{ max-width:230px; }
.card--pain .card__text{ margin-top:10px; }

/* три системы */
.panel{
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--radius-lg);
}
.sys{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:9px 10px;
  align-items:center;
  /* карточки в ряду одной высоты: свободное место распределялось между строками грида,
     и у карточек с коротким описанием иконка с заголовком уезжали вниз (Роман 06.09) */
  align-content:start;
  padding:12px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-width:0;
}
.sys__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  grid-row:1;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
}
.sys__icon .ic{ width:25px; height:25px; }
.sys__icon--fire{ background:var(--orange-soft); color:var(--orange); }
.sys__title{
  /* заголовок всегда в две строки — описания стартуют на одной линии */
  min-height:calc(2 * 1.28em);
  display:flex;
  align-items:center;
  font-size:14.5px;
  font-weight:700;
  line-height:1.28;
  grid-column:2;
  grid-row:1;
  min-width:0;
  /* никаких overflow-wrap:anywhere — рвёт слово посреди букв. Перенос задаём
     мягким дефисом ­ в самом тексте, по правилам русского языка (Роман 06.09) */
  hyphens:manual;
}
.sys__text{
  grid-column:1 / -1; grid-row:2;
  margin-top:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}

/* статус объекта */
.split{
  display:grid;
  /* слева три карточки систем — им тесно, «Видеонаблюдение» вылезало за карточку;
     справа список и легенда, там был запас пустого места (Роман 06.09) */
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:26px;
  align-items:stretch;
}
/* Подложки не растягиваем: от этого под карточками оставались пустые серые зоны
   (Роман 06.09). Вместо них сняли рамку и фон — блоки держит сетка карточек. */
.split__col{ display:flex; flex-direction:column; }
/* Правая часть тянется по высоте левой, но заканчивается чуть выше её нижнего края.
   Высоту добирают сами карточки (grid-auto-rows:1fr), а не пустая подложка — поэтому
   оба списка справа заканчиваются на одной линии (Роман 06.09). */
.split__col > .status{ flex:1; padding-bottom:10px; }
.status > .checks{ height:100%; grid-auto-rows:1fr; }
.status > .legend{ height:100%; }
.status{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:26px;
  align-items:stretch;
}
.checks{
  display:grid;
  gap:6px;
  align-content:start;
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--radius-lg);
}
.check{
  display:flex;
  align-items:center;
  gap:13px;
  padding:5px 13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
}
.check__num{
  font-size:22px;
  font-weight:800;
  color:var(--blue);
  flex:none;
  width:15px;
}
.check__ic{ color:var(--blue); display:flex; }
.check__ic .ic{ width:27px; height:27px; }
.check__text{
  font-size:13.5px;
  line-height:1.38;
  color:var(--ink-soft);
}

.legend{
  /* одна общая рамка, а не три карточки: это один смысловой список (Роман 06.09).
     Пункты распределяются по высоте, поэтому низ совпадает с соседним списком. */
  display:grid;
  align-content:space-between;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.legend__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
}
.legend__item b{ font-weight:700; display:block; }
.legend__note{
  display:block;
  margin-top:2px;
  font-size:13.5px;
  color:var(--muted);
}
.dot{
  width:14px; height:14px;
  margin-top:4px;
  border-radius:50%;
  flex:none;
}
.dot--ok{ background:var(--ok); }
.dot--warn{ background:var(--warn); }
.dot--alarm{ background:var(--alarm); }

/* шаги */
.steps{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
}
.step{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  height:100%;
}
.step__num{
  font-size:31px;
  font-weight:800;
  color:var(--blue);
  line-height:1;
  flex:none;
}
.step__ic{ color:var(--blue); display:flex; flex:none; }
.step__ic .ic{ width:30px; height:30px; }
.step__title{ font-size:13.5px; font-weight:700; line-height:1.28; }
.step__text{
  margin-top:4px;
  font-size:12.5px;
  line-height:1.42;
  color:var(--muted);
}
.steps__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  color:#94A3B8;
}
.steps__arrow svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* сегменты */
.card--seg{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:9px 12px;
  align-items:center;
  padding:14px;
  min-height:132px;
  align-content:center;
}
.seg__ic{ display:flex; color:var(--blue); grid-row:1; }
.seg__ic .ic{ width:46px; height:46px; stroke-width:1.4; }
.card--seg .card__title{ grid-column:2; grid-row:1; font-size:14.5px; }
.card--seg .card__text{ grid-column:1 / -1; grid-row:2; margin-top:0; font-size:13px; }

/* выгоды */
.card--benefit{
  display:flex;
  align-items:flex-start;
  gap:17px;
  padding:16px;
  min-height:118px;
}
.benefit__ic{ color:var(--blue); display:flex; flex:none; padding-top:2px; }
.benefit__ic .ic{ width:58px; height:58px; stroke-width:1.4; }
.card--benefit .card__body{ max-width:255px; }
.card--benefit .card__title{ font-size:16px; }
.card--benefit .card__text{ font-size:13.5px; }

/* CTA */
.cta{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 30px;
  min-height:68px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(520px 200px at 4% 50%, #EDF3FF 0%, rgba(237,243,255,0) 72%),
    linear-gradient(90deg,#FAFCFF 0%, #FFFFFF 55%);
}
.cta::after{
  content:"";
  position:absolute;
  right:-24px; bottom:-34px;
  width:120px; height:120px;
  background:linear-gradient(135deg,var(--orange),#FF9A52);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.88;
  pointer-events:none;
}
.cta__text{ padding-left:8%; }
.cta__title{ font-size:26px; font-weight:800; letter-spacing:-.018em; }
.cta__lead{ margin-top:6px; font-size:14.5px; color:var(--muted); }
.cta .btn{ position:relative; z-index:1; margin-right:9%; }

/* подвал */
.footer{
  border-top:1px solid var(--line-2);
  background:#FCFDFF;
}
.footer__inner{
  display:grid;
  grid-template-columns:215px minmax(0,1fr) auto;
  gap:36px;
  padding-top:12px;
  padding-bottom:11px;
  align-items:center;
}
.footer__brand img{ width:172px; height:auto; }
.footer__legal{
  margin-top:6px;
  font-size:15px;
  font-weight:600;
  color:var(--ink-soft);
}
.footer__about{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  max-width:460px;
}
.contacts{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14.5px;
}
.contacts li{ display:flex; align-items:center; gap:11px; white-space:nowrap; }
.contacts a:hover{ color:var(--blue); }
.contacts__ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
}
.contacts__ic .ic{ width:18px; height:18px; }

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:11px;
  padding-bottom:12px;
  border-top:1px solid var(--line-2);
  font-size:12px;
  color:var(--muted-2);
}
.footer__links{ display:flex; gap:40px; }
.footer__links a:hover{ color:var(--blue); }

/* ---------- адаптив ---------- */
@media (max-width:1320px){
  .nav{ margin-left:48px; gap:30px; font-size:15px; }
  .logo img{ width:180px; }
}

@media (max-width:1180px){
  :root{ --pad:32px; }
  .hero__inner{ grid-template-columns:1fr; gap:28px; }
  .hero__title{ font-size:36px; }
  .hero__lead{ max-width:none; }
  .stats{ max-width:none; }
  .hero__media{ margin-right:0; }
  .split{ grid-template-columns:1fr; gap:30px; }
  .grid--5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid{ gap:16px; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .steps__arrow{ display:none; }
  .card--pain .card__body{ max-width:none; }
}

@media (max-width:860px){
  .nav{
    position:fixed;
    top:0;
    right:0;
    left:auto;
    bottom:0;
    z-index:45;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    width:min(300px,86vw);
    height:100dvh;
    margin:0;
    padding:88px 24px 28px;
    background:#fff;
    border:0;
    border-left:1px solid var(--line);
    box-shadow:-16px 0 48px rgba(15,23,42,.1);
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .32s ease, visibility .32s ease;
  }
  .nav a{ width:100%; padding:12px 0; }
  .header.is-open .nav{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .header__inner{ position:relative; min-height:72px; }
  .logo img{ width:150px; }
  .burger{ display:block; order:3; margin-left:12px; position:relative; z-index:50; }
  .header__login{ margin-left:auto; }
  .grid--3,.grid--5,.panel .grid--3{ grid-template-columns:1fr; }
  .status{ grid-template-columns:1fr; }
  .cta{ flex-direction:column; align-items:flex-start; padding:24px; }
  .cta__text{ padding-left:0; }
  .cta .btn{ margin-right:0; }
  .footer__inner{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .contacts{ flex-wrap:wrap; gap:16px 26px; }
}

@media (max-width:600px){
  :root{ --pad:16px; }
  .hero{ padding:28px 0 26px; }
  .hero__title{ font-size:29px; }
  .h2{ font-size:21px; }
  /* три карточки помещаются в строку и на телефоне — в столбик они занимали
     пол-экрана впустую (Роман 06.09). Ужимаем кегль и отступы. */
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .stat{ padding:10px 10px; }
  .stat__num{ font-size:23px; }
  .stat__label{ margin-top:3px; font-size:11.5px; line-height:1.3; }
  .steps{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .card--pain,.card--benefit,.card--seg{ min-height:0; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__links{ flex-direction:column; gap:8px; }
  .cta__title{ font-size:21px; }
}