/* cctv24.ru — своё оформление поверх common/style.css (18.10.2026).
   «Технологичный»: графитовые шапка и первый экран с сеткой, прямые углы, узкий шрифт, квадратные метки.
   Задача — не походить на video-nabludenie.ru (та же ниша, тот же движок). Контраст текста — не ниже 4,5:1. */
body{font-family:Bahnschrift,"Segoe UI Variable Text","Segoe UI",Roboto,Arial,sans-serif;color:#1b2422;background:#fbfcfc}
h1,h2,h3{letter-spacing:-.01em}
h2{position:relative;padding-left:16px}
h2:before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;background:var(--accent)}
.btn,.lead-form button{border-radius:4px;text-transform:uppercase;letter-spacing:.04em;font-size:15.5px}
.btn-s{font-size:14px}
/* шапка */
.top{background:#0d1517;border-bottom:1px solid #22302f}
.logo{color:#fff}.logo small{color:#9fb3b0}
.logo .mark{border-radius:3px;background:transparent;border:2px solid #3fc2b4;color:#3fc2b4;font-family:Consolas,"Courier New",monospace}
.menu a{color:#d5e1df}.menu a.on,.menu a:hover{color:#5fd3c7}
.top-phone,.top-msg{color:#5fd3c7}
/* первый экран */
.hero{background-color:#0d1517;background-image:linear-gradient(rgba(95,211,199,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(95,211,199,.07) 1px,transparent 1px);background-size:32px 32px;color:#e6eeed;padding:52px 0 60px}
.hero h1{color:#fff}
.hero .sub{color:#c5d3d1}
.hero a{color:#5fd3c7}
.hero .ticks li:before{content:"";width:10px;height:10px;top:.55em;background:#3fc2b4}
.hero .ticks li{color:#e6eeed}
.facts div{background:#142022;border:1px solid #2a3b39;border-radius:4px;box-shadow:none}
.facts dt{color:#9fb3b0;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}.facts dd{color:#fff;font-size:19px;line-height:1.3}
.hero-form{border-radius:4px;border-top:4px solid #3fc2b4;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero .btn-ghost{background:transparent;color:#fff;border-color:#5fd3c7}
/* блоки */
.blk.alt,.more{background:#eef3f2}
.card{border:0;border-left:4px solid var(--accent);border-radius:3px;background:#fff;box-shadow:0 1px 0 #dfe7e5,0 6px 16px rgba(13,21,23,.05)}
a.card:hover{border-left-color:var(--accent2);box-shadow:0 1px 0 #dfe7e5,0 10px 24px rgba(13,21,23,.1)}
.steps li{border-radius:3px;border:1px solid #dfe7e5}
.steps li:before{border-radius:3px;font-family:Consolas,"Courier New",monospace}
.ticks li:before{content:"■";font-size:12px;top:.25em}
details{border-radius:4px;background:#fff}
.entry{border-radius:4px;border-left:4px solid var(--accent)}
.lead-form input,.lead-form select{border-radius:4px}
.pills span{border-radius:4px}
.wiz-bar,.wiz-bar i{border-radius:0}
/* форма внизу и подвал */
.lead{background:#0d1517}
.lead-form{border-radius:4px}
.foot{background:#0a1012}
.sc-ico{border-radius:4px}
/* раскладка первого экрана на компьютере: форма слева, текст справа, цифры строкой (на телефоне — общий порядок) */
@media (min-width:861px){
  .hero-in{grid-template-columns:1fr 1.25fr;grid-template-areas:"form txt" "form more"}
  .facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .foot-in{grid-template-columns:1fr 1fr 1fr}
}