:root{
  --bg:#e7edf2;
  --panel:#ffffff;
  --text:#0b2540;
  --muted:#4f6273;
  --line:#c8d4df;
  --blue:#2f5d8a;
  --soft:#f2f6fa;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* HEADER */
.header{
  background:var(--soft);
  border-bottom:1px solid var(--line);
}
.header__inner{
  height:56px;
  display:flex;
  align-items:center;
}
.brand{
  font-size:14px;
  color:var(--muted);
}

/* INTRO */
.intro{
  padding:32px 0 18px;
}
.intro__title{
  margin:0 0 10px;
  font-size:28px;
  font-weight:700;
}
.intro__text{
  margin:0 0 18px;
  max-width:760px;
  font-size:15px;
  color:var(--muted);
}

/* CALCULATOR GRID */
.calc-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.calc-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
/* фиксируем одинаковый размер превью во всех карточках */
.calc-card img{
  width:100%;
  aspect-ratio: 16 / 9;      /* одинаковая высота при любой исходной картинке */
  height:auto;               /* высоту задаёт aspect-ratio */
  object-fit: contain;       /* подгоняем картинку внутрь поля без обрезки */
  object-position: center;
  background:#ffffff;        /* чтобы вокруг не было "грязного" фона */
  display:block;
}
.calc-card__label{
  padding:10px 12px;
  font-size:14px;
  border-top:1px solid var(--line);
}
.calc-card:hover{
  border-color:#aebdcb;
}

/* PASSPORT (короткая "паспортная" строка доверия) */
.passport{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.passport__item{
  background:var(--panel);
  border:1px solid var(--line);
  padding:8px 10px;
}

/* RESULT */
.result{
  margin-top:22px;
  padding:18px 0;
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.result__inner{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.result__title{
  font-weight:700;
  margin-bottom:4px;
}
.result__text{
  font-size:14px;
  color:var(--muted);
}

/* PROOF */
.proof{
  padding:22px 0;
}
.proof__inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:14px;
  align-items:start;
}

.proof__title{
  font-size:18px;
  font-weight:700;
  margin-bottom:6px;
}
.proof__subtitle{
  color:var(--muted);
  font-size:14px;
  margin-bottom:10px;
  max-width:70ch;
}

.mini-scheme{
  background:var(--panel);
  border:1px solid var(--line);
  padding:10px;
}
.mini-scheme svg{
  width:100%;
  height:auto;
  display:block;
}

.spec{
  background:var(--panel);
  border:1px solid var(--line);
  padding:12px;
}
.spec__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:8px;
}
.spec__title{
  font-weight:700;
}
.spec__note{
  color:var(--muted);
  font-size:12px;
}
.spec__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.spec__table th,
.spec__table td{
  border-top:1px solid var(--line);
  padding:8px 6px;
  text-align:left;
}
.spec__table thead th{
  border-top:none;
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.spec__num{
  text-align:right;
  white-space:nowrap;
}
.spec__foot{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

/* VERIFY */
.verify{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.verify__title{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}
.verify__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.verify__item{
  background:var(--panel);
  border:1px solid var(--line);
  padding:12px;
}
.verify__h{
  font-weight:700;
  margin-bottom:6px;
}
.verify__t{
  font-size:13px;
  color:var(--muted);
}

/* DOCS */
.docs{
  padding:18px 0;
}
.docs__inner{
  max-width:900px;
}
.docs__title{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}
.docs__text{
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}
.docs__links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.doclink{
  display:inline-block;
  background:var(--panel);
  border:1px solid var(--line);
  padding:8px 10px;
  text-decoration:none;
  color:var(--blue);
  font-size:13px;
}
.doclink:hover{
  border-color:#aebdcb;
  text-decoration:underline;
}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  background:var(--soft);
  margin-top:18px;
}
.footer__inner{
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
  gap:12px;
  flex-wrap:wrap;
}
.footer__contacts span{
  margin-left:16px;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .calc-grid{ grid-template-columns:1fr; }
  .result__inner{ grid-template-columns:1fr; }
  .proof__inner{ grid-template-columns:1fr; }
  .verify__grid{ grid-template-columns:1fr; }
  .footer__contacts span{ margin-left:0; margin-right:16px; display:inline-block; }
}