/* EasyScanner — сайт. Без сборщиков и шрифтов с CDN: страница должна
   открываться мгновенно, это фактор ранжирования и первое, что видит
   человек с телефона в чужом складе. */
:root{
  --blue:#2aabee; --blue-dark:#17538c; --ink:#16202c; --muted:#63768a;
  --line:#e2eaf1; --bg:#f7fafc; --card:#fff;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 Georgia,"Times New Roman",serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
h1,h2,h3,nav,.cta,.meta,th,.card time{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1{font-size:2.05rem;line-height:1.2;margin:.6em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.4rem;color:var(--blue-dark);margin:2em 0 .6em}
h3{font-size:1.12rem;margin:1.6em 0 .5em}
p,ul,ol{margin:0 0 1.1em}
li{margin:.3em 0}
a{color:var(--blue-dark)}
a:hover{color:var(--blue)}

/* Шапка */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.logo{font:700 1.18rem/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--blue-dark);text-decoration:none}
nav{display:flex;gap:16px;flex:1;flex-wrap:wrap;font-size:.95rem}
nav a{color:var(--muted);text-decoration:none}
nav a:hover,nav a.active{color:var(--ink)}
nav a.active{font-weight:600}

/* Кнопка */
.cta{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:9px;font-weight:600}
.cta:hover{background:var(--blue-dark);color:#fff}
.cta.small{padding:8px 15px;font-size:.9rem}

/* Первый экран */
.hero{padding:44px 0 8px}
.hero h1{font-size:2.3rem}
.lead{font-size:1.15rem;color:var(--muted)}
.hero .cta{margin-top:8px}
.note{font-size:.92rem;color:var(--muted);margin-top:10px}

/* Карточки и сетки */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin:0 0 1.6em;padding:0;list-style:none}
.grid li,.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.grid h3{margin:0 0 .35em;font-size:1.02rem}
.grid p{margin:0;font-size:.95rem;color:var(--muted)}

ul.posts{list-style:none;padding:0}
ul.posts .card{margin-bottom:14px}
.card time{display:block;font-size:.85rem;color:var(--muted)}
.card h3{margin:.25em 0 .35em}
.card h3 a{text-decoration:none}
.card p{margin:0;color:var(--muted);font-size:.96rem}

/* Таблицы */
table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.95rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:#eaf4fb;font-weight:600;font-size:.9rem}

blockquote{margin:0 0 1.2em;padding:2px 0 2px 18px;border-left:4px solid var(--blue);color:var(--muted);font-style:italic}
code{background:#eef3f7;padding:1px 6px;border-radius:5px;font-size:.92em}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.meta{color:var(--muted);font-size:.92rem;margin-top:26px}

/* Подвал */
.foot{background:var(--card);border-top:1px solid var(--line);margin-top:56px;padding:34px 0 44px}
.foot p{margin:.4em 0}
.muted{color:var(--muted);font-size:.92rem}

@media (max-width:620px){
  h1,.hero h1{font-size:1.65rem}
  .bar{min-height:auto;padding:12px 0}
  .cta.small{display:none}
}

/* Отзывы (23.09.2026). Карточка с аватаркой: отзыв с лицом убедительнее
   отзыва с текстом. Аватарка есть не у всех — запасной вариант из инициала
   должен выглядеть намеренно, а не как дырка на месте картинки. */
ul.reviews{list-style:none;padding:0;margin:0 0 1.6em;display:grid;gap:16px}
.review{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.review .head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ava{width:48px;height:48px;border-radius:50%;flex:0 0 48px;object-fit:cover;display:block}
.ava-letter{display:flex;align-items:center;justify-content:center;
  color:#fff;font:600 20px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.review .who{font:600 1rem/1.3 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.review .who a{text-decoration:none}
.review .who a:hover{text-decoration:underline}
.review .quote{margin:0 0 .8em;font-style:italic;color:var(--ink)}
.review .src{margin:0;font-size:.9rem}
@media (max-width:620px){
  .review{padding:16px}
  .ava{width:40px;height:40px;flex-basis:40px}
  .ava-letter{font-size:17px}
}