:root{
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b6fb8;
  --text:#1f2937;
  --maxwidth:1100px;
  --qr-size:240px;
}

/* Базовая типографика: один шрифт, единый вес */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  padding:28px 16px;
}

/* Карточка центр */
.page{display:flex;justify-content:center;padding-bottom:40px}
.card{width:100%;max-width:var(--maxwidth);background:var(--card);border-radius:12px;box-shadow:0 8px 30px rgba(15,23,42,0.06);padding:22px}

/* Шапка / hero */
.hero{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.hero .logo{width:140px;height:auto;display:block}
.hero .hero-text{flex:1}
.hero .site-title{margin:0;font-size:28px;color:var(--accent);font-weight:400}
.hero .site-sub{margin:6px 0 0;color:var(--text);font-weight:400}

/* Контент: QR слева, текст справа */
.content{display:grid;grid-template-columns: var(--qr-size) 1fr;gap:24px;align-items:start}
@media (max-width:920px){ .content{grid-template-columns:1fr} .qr-col{order:-1} }

/* QR: **строго квадратный контейнер**; картинка заполняет его без искажения */
.qr-col{text-align:center}
.qr-wrap{
  width:var(--qr-size);
  height:var(--qr-size);
  border-radius:8px;
  background:#fff;
  border:1px solid #eef2f6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.qr{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain; /* важная строка — сохраняет квадратность без искажений */
  image-rendering: -webkit-optimize-contrast;
}

/* Текстовые классы — единый вес, обычный цвет */
.lead{font-size:16px;margin:6px 0 12px}
.normal{font-size:16px;margin:6px 0}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-weight:400;}

/* Убираем визуальное выделение у strong/b — обычный вес */
strong, b { font-weight: 400; color: var(--text); }

/* Ссылка/поле с копированием */
.link-block{margin-top:12px}
.label{display:block;margin-bottom:6px;font-weight:400}
.link-row{display:flex;gap:12px;align-items:center}
.link-input{flex:1;font-family:var(--mono);font-size:14px;padding:8px 10px;border-radius:8px;border:1px solid #e6eef8;background:#fbfdff;overflow-x:auto}
.btn{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600}

/* Форма: email и days на одном уровне */
.form-row{display:flex;gap:12px;align-items:center}
.form-row .col{flex:1}
@media (max-width:720px){ .form-row{flex-direction:column} .form-row .col{width:100%} }

/* Футер — темная полоса, список всегда виден */
.site-footer{margin-top:22px;border-radius:8px;padding:18px;background:linear-gradient(180deg,#0d5f98,#0b4f82);color:#fff}
.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-left{flex:1;min-width:220px}
.footer-right{min-width:260px}
.footer-text{margin:0;color:#dff0ff}
.footer-link a{color:#dff0ff;text-decoration:underline}

/* Список приложений */
.clients-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.clients-grid h4{margin:0 0 6px;color:#fff;font-size:15px;font-weight:500}
.clients-grid ul{margin:0;padding-left:18px}
.clients-grid li{margin:6px 0}
.clients-grid a{color:#fff}

/* синие гиперссылки для скачивания */
.clients-col .download-link {
  color: #0645AD;            /* классический link-blue */
  text-decoration: underline;
  margin-left: 6px;
  font-size: 0.95em;
}
.clients-col .download-link:hover {
  color: #0b63d6;
  text-decoration: underline;
}

/* маленькие платформенные иконки */
.icon-sm {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
  fill: currentColor;
}
/* Маленькие стили */
.center{text-align:center}

/* responsive tweaks */
@media (max-width:600px){
  .site-title{font-size:22px}
  :root{--qr-size:140px}
  .clients-grid{grid-template-columns:1fr}
}