/* ============================================================
   Автодиагностика — кирпично-чёрная тема
   Один CSS-файл, без внешних зависимостей и шрифтов
   ============================================================ */

:root{
  --ink:      #100e0d;
  --ink-2:    #171413;
  --panel:    #1c1817;
  --panel-2:  #221d1b;
  --line:     rgba(196,80,44,.22);
  --line-2:   rgba(255,255,255,.07);
  --brick:    #c4502c;
  --brick-hi: #e2643c;
  --brick-lo: #8f3517;
  --text:     #efe8e4;
  --muted:    #a2968f;
  --ok:       #6fae7c;
  --r:        14px;
  --wrap:     1160px;
}

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

html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.02em }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
table{ border-collapse:collapse; width:100% }

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

.sprite{ display:none }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.ic{ width:20px; height:20px; flex:0 0 auto; fill:none;
     stroke:currentColor; stroke-width:1.7;
     stroke-linecap:round; stroke-linejoin:round }

/* ---------- типографика блоков ---------- */

.eyebrow{
  display:flex; align-items:center; gap:9px;
  margin:0 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brick-hi);
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brick);
  box-shadow:0 0 0 4px rgba(196,80,44,.16);
}

.sec{ padding:84px 0; border-top:1px solid var(--line-2) }
.sec--tight{ padding:0 0 84px; border-top:0 }
.sec--last{ padding-bottom:64px }

.sec__head{ max-width:720px; margin:0 auto 44px; text-align:center }
.sec__head--left{ margin:0 0 26px; text-align:left }
.sec__head h2{ font-size:clamp(26px,3.4vw,40px) }
.sec__sub{ margin-top:12px; color:var(--muted) }

/* ---------- кнопки ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 24px;
  border:1px solid transparent; border-radius:12px;
  background:linear-gradient(180deg,var(--brick) 0%,var(--brick-lo) 100%);
  color:#fff; font-size:15px; font-weight:600; white-space:nowrap;
  box-shadow:0 10px 28px -14px rgba(196,80,44,.9);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08) }
.btn:active{ transform:translateY(0) }

.btn--ghost{
  background:transparent; border-color:var(--line);
  color:var(--text); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--brick); background:rgba(196,80,44,.08) }

.btn--sm{ padding:11px 18px; font-size:14px; border-radius:10px }

/* ---------- шапка ---------- */

.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(16,14,13,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
.hdr__in{ display:flex; align-items:center; gap:22px; height:70px }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto }
.brand__mark{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:11px;
  color:var(--brick-hi);
  background:linear-gradient(150deg,#241c19,#161211);
  border:1px solid var(--line);
}
.brand__mark svg{ width:26px; height:26px }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand__txt b{ font-size:14px; letter-spacing:.06em }
.brand__txt i{ font-size:11px; font-style:normal; color:var(--muted); letter-spacing:.02em }

.nav{ display:flex; gap:26px; font-size:14.5px; color:#d9cfc9 }
.nav a{ position:relative; padding:4px 0; transition:color .16s ease }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brick); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover{ color:#fff }
.nav a:hover::after{ transform:scaleX(1) }

.burger{
  display:none; width:42px; height:38px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  cursor:pointer;
}
.burger span{
  display:block; width:18px; height:2px; margin:4px auto;
  background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}

/* ---------- первый экран ---------- */

.hero{ position:relative; padding:76px 0 96px; overflow:hidden }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:80%;
  background:
    radial-gradient(60% 70% at 18% 0%,rgba(196,80,44,.22),transparent 70%),
    radial-gradient(45% 60% at 92% 18%,rgba(143,53,23,.20),transparent 70%);
  pointer-events:none;
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero h1{ font-size:clamp(30px,4.6vw,54px); margin-bottom:18px }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brick-hi),#f0a07c 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ max-width:56ch; font-size:17px; color:#cfc4be }

.points{ display:grid; gap:11px; margin:26px 0 30px }
.points li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:#e2d9d4 }
.points .ic{ color:var(--brick-hi); margin-top:3px }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px }

/* панель со «сканером» */

.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel__top{
  display:flex; align-items:center; gap:10px;
  padding-bottom:14px; border-bottom:1px solid var(--line-2); font-size:14px;
}
.panel__meta{ margin-left:auto; font-size:12px; color:var(--muted) }
.led{
  width:9px; height:9px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 4px rgba(111,174,124,.15);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.codes{ display:grid; gap:8px; margin:16px 0 }
.code{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line-2);
  border-left:3px solid var(--muted);
}
.code span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; font-weight:600; letter-spacing:.04em;
}
.code i{ font-style:normal; font-size:12.5px; color:var(--muted) }
.code--warn{ border-left-color:var(--brick) }
.code--warn span{ color:var(--brick-hi) }
.code--info{ border-left-color:#6d7f9c }
.code--ok{ border-left-color:var(--ok) }
.code--ok span{ color:var(--ok) }

.panel__bottom{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding-top:14px; border-top:1px solid var(--line-2); text-align:center;
}
.panel__bottom b{ display:block; font-size:19px; color:var(--brick-hi) }
.panel__bottom span{ font-size:11.5px; color:var(--muted) }

/* кирпичная кладка внизу первого экрана */

.wall{
  position:absolute; left:0; right:0; bottom:0; height:118px;
  opacity:.5;
  background-image:
    linear-gradient(180deg,var(--ink),transparent 70%),
    repeating-linear-gradient(0deg,  rgba(196,80,44,.34) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(196,80,44,.34) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(196,80,44,.20) 0 1px, transparent 1px 96px);
  background-position:0 0, 0 0, 0 0, 48px 17px;
  background-size:auto, auto, auto, auto;
  mask-image:linear-gradient(180deg,transparent,#000);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
  pointer-events:none;
}

/* ---------- сетки и карточки ---------- */

.grid{ display:grid; gap:18px }
.grid--3{ grid-template-columns:repeat(3,1fr) }

.card{
  padding:26px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  border:1px solid var(--line-2);
  border-radius:var(--r);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--line);
  background:linear-gradient(180deg,rgba(196,80,44,.10),rgba(255,255,255,.012));
}
.card h3{ font-size:17.5px; margin-bottom:9px }
.card p{ font-size:14.5px; color:var(--muted) }

.card__ic{
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:16px;
  border-radius:12px; color:var(--brick-hi);
  background:rgba(196,80,44,.10);
  border:1px solid var(--line);
}

/* ---------- симптомы ---------- */

.symp{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center }
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chips li{
  padding:9px 15px; font-size:14px; color:#ded5d0;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2); border-radius:999px;
}
.chips li::before{ content:"—"; margin-right:8px; color:var(--brick) }

/* ---------- прайс ---------- */

.table{
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.table tr+tr{ border-top:1px solid var(--line-2) }
.table th{
  padding:16px 22px; text-align:left; font-size:15px; font-weight:500; color:#e6ddd8;
}
.table td{
  padding:16px 22px; text-align:right; white-space:nowrap;
  font-size:15px; font-weight:600; color:var(--brick-hi);
}
.table tbody tr:hover{ background:rgba(196,80,44,.06) }

.note{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:16px; padding:14px 18px;
  font-size:14px; color:var(--muted);
  border:1px dashed var(--line); border-radius:12px;
}
.note .ic{ color:var(--brick-hi); margin-top:2px }

/* ---------- шаги ---------- */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s }
.steps li{
  position:relative; padding:26px 22px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.steps__n{
  display:block; margin-bottom:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px; font-weight:700; color:rgba(196,80,44,.55);
}
.steps h3{ font-size:16.5px; margin-bottom:8px }
.steps p{ font-size:14.5px; color:var(--muted) }

/* ---------- отзывы ---------- */

.rev{
  margin:0; padding:26px 24px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.rev p{ font-size:15px; color:#e2d9d4 }
.rev footer{ margin-top:16px; font-size:13px; color:var(--brick-hi) }

/* ---------- FAQ ---------- */

.faq{ border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden }
.faq details+details{ border-top:1px solid var(--line-2) }
.faq summary{
  position:relative; cursor:pointer; list-style:none;
  padding:19px 54px 19px 22px; font-size:16px; font-weight:500;
  transition:background .16s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ background:rgba(196,80,44,.06) }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:9px; height:9px; margin-top:-7px;
  border-right:2px solid var(--brick); border-bottom:2px solid var(--brick);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
.faq p{ padding:0 54px 22px 22px; font-size:14.5px; color:var(--muted) }

/* ---------- контакты ---------- */

.cta{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  padding:34px 32px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:20px;
  background:
    radial-gradient(70% 130% at 92% 0%,rgba(196,80,44,.20),transparent 65%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
}
.cta h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:10px }
.cta p{ font-size:15px; color:var(--muted) }
.cta__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end }

.info__item{
  padding:26px 24px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.info__item h3{ font-size:16px; margin-bottom:8px }
.info__item p{ font-size:14.5px; color:var(--muted) }

/* ---------- подвал ---------- */

.ftr{ border-top:1px solid var(--line-2); padding:26px 0; font-size:13px; color:var(--muted) }
.ftr__in{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center }
.ftr__links{ display:flex; gap:20px }
.ftr__links a:hover{ color:var(--brick-hi) }

/* ---------- адаптив ---------- */

@media (max-width:1000px){
  .hero__in{ grid-template-columns:1fr; gap:40px }
  .grid--3{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .symp{ grid-template-columns:1fr; gap:24px }
  .cta{ grid-template-columns:1fr }
  .cta__btns{ justify-content:flex-start }
}

@media (max-width:760px){
  .sec{ padding:60px 0 }
  .sec--tight{ padding-bottom:60px }
  .hdr__in{ height:62px; gap:12px }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    padding:8px 20px 16px;
    background:rgba(16,14,13,.98);
    border-bottom:1px solid var(--line-2);
    display:none;
  }
  .nav.is-open{ display:flex }
  .nav a{ padding:12px 0; border-bottom:1px solid var(--line-2) }
  .burger{ display:block }
  .brand__txt i{ display:none }
  .hero{ padding:52px 0 76px }
  .wall{ height:80px }
  .grid--3,.steps{ grid-template-columns:1fr }
  .table th,.table td{ padding:14px 16px; font-size:14px }
  .panel__bottom b{ font-size:17px }
  .btn{ width:100% }
  .cta__btns{ flex-direction:column }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}