/* ============================================================
   soboleznovaniya.ru — РЕДИЗАЙН 2026 · база
   reset · типографика · контейнер · кнопки · общие утилиты
   ============================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--page);
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--ink); color:#fff; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,h5,h6{ margin:0; }
button{ font-family:inherit; }

/* ---------- Контейнер ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
@media (max-width:640px){
  .container{ padding:0 var(--gutter-mobile); }
}

/* ---------- Типографические помощники ---------- */
.eyebrow{
  font-size:14px;
  font-weight:var(--fw-semibold);
  color:var(--muted);
  letter-spacing:0;
}
.eyebrow--upper{
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.brace{ color:var(--mute); }              /* {.ru} и { метка } */
.on-dark .brace{ color:var(--on-dark-faint2); }

.display{
  font-size:var(--h1-display);
  line-height:0.92;
  letter-spacing:var(--track-display);
  font-weight:var(--fw-extrabold);
}
.h2{
  font-size:var(--h2);
  line-height:1.0;
  letter-spacing:-0.035em;
  font-weight:var(--fw-extrabold);
}
.lead{
  font-size:21px;
  line-height:1.5;
  color:var(--slate);
}

/* ---------- Кнопки-пилюли ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:inherit;
  font-weight:var(--fw-semibold);
  font-size:17px;
  padding:19px 34px;
  border-radius:var(--r-pill);
  cursor:pointer;
  border:none;
  transition:transform .14s, box-shadow .14s, opacity .12s, background .14s, color .14s;
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ box-shadow:var(--sh-pill-hover); transform:translateY(-2px); }
.btn--secondary{ background:#fff; color:var(--ink); border:1.5px solid var(--border-2); }
.btn--secondary:hover{ border-color:var(--ink); }
.btn--on-dark{ background:#fff; color:var(--ink); }
.btn--on-dark:hover{ opacity:.88; }

/* ---------- Теги / чипы ---------- */
.tag{
  display:inline-flex;
  font-size:12px;
  font-weight:var(--fw-semibold);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--cloud);
  padding:9px 14px;
  border-radius:var(--r-tag);
}
.chip{
  font-size:13px;
  font-weight:var(--fw-semibold);
  color:var(--ink);
  background:var(--cloud);
  padding:9px 14px;
  border-radius:var(--r-tag);
  transition:background .12s, color .12s;
}
.chip:hover{ background:var(--ink); color:#fff; }

/* ---------- Утилиты ---------- */
.section{ padding:56px 0; }
.section--hairline{ border-top:1px solid var(--line); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}