/* ============================================================
   FLUID / «РЕЗИНОВАЯ» СЕТКА — глобальный слой поверх styles.css
   Контейнер и сетки тянутся за вьюпортом (vw + clamp + auto-fit),
   без жёсткого кэпа 1200px. Подключается на ВСЕХ страницах
   (в head() после styles.css — перекрывает фикс-сетку везде).
   ============================================================ */
:root{
  /* поля и зазоры масштабируются с шириной экрана */
  --pad: clamp(16px, 3.4vw, 88px);
  --gap: clamp(16px, 1.9vw, 36px);
}

/* контейнер: занимает почти всю ширину, но не «разъезжается» на 4K */
.container{
  width: 100%;
  max-width: min(100%, 1840px);
  padding-inline: var(--pad);
}

/* плавная типографика, привязанная к ширине вьюпорта */
.hero__title, h1{ font-size: clamp(34px, 4.6vw, 76px); line-height: 1.04; }
.section-head h2, h2{ font-size: clamp(26px, 2.9vw, 50px); }
.lead{ font-size: clamp(16px, 1.35vw, 22px); max-width: 68ch; }
.section-head{ max-width: clamp(620px, 60vw, 920px); }

/* карточные сетки реально «резиновые»: колонки сами добираются по ширине */
.grid-3, .grid-4, .scards, .lcards{
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* «Что вы получаете» — строго 3 карточки в ряд (адаптив в styles.css) */
.getgrid{ grid-template-columns: repeat(3, 1fr); }
.grid-2{
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.stats{
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

/* герой и контентные сетки тянутся пропорционально, gap масштабируется */
.hero__grid{ gap: clamp(28px, 3.4vw, 72px); }
.hero-stats, .cstats{ grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); }

/* SEO-проза остаётся читаемой: колонки не «разъезжаются» по сверхширине */
.prose{ column-width: 38ch; column-count: auto; }