:root{
  --bg:#fff; --fg:#000; --muted:#555;
  --maxw:1120px; --pad:20px; --gap:16px;
  --b:2px solid var(--fg);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
img{max-width:100%;height:auto;display:block}

/* full-bleed утилита для линий на всю ширину экрана */
.fullbleed-line{position:relative}
.fullbleed-line::after{content:"";display:block;height:0;border-bottom:var(--b);
  position:relative;left:50%;width:100vw;transform:translateX(-50%)}

/* layout: контейнер всегда по центру, фиксируем ширину */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad); padding-right:var(--pad);
  display:block;
}

/* чтобы все секции не «сжимались» по контенту */
section, header, footer{width:100%}
.frame{border:var(--b);padding:22px;width:100%}
.hero{margin:28px 0;width:100%}
h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;margin:0 0 10px}
.lead{font-size:clamp(16px,2.1vw,19px);max-width:760px;margin:6px 0 0}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{display:block;height:auto}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}
.nav a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--fg)}

/* buttons */
.cta-row{display:flex;gap:12px;margin:16px 0 6px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border:var(--b);text-decoration:none;color:var(--fg);transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn-black{background:var(--fg);color:var(--bg)}
.btn-outline{background:transparent}
.btn-lg{padding:14px 18px;font-weight:700}
.btn-wide{width:100%;max-width:360px}
.hero .btn-black{padding:16px 22px;font-weight:800;font-size:1rem}
.badges{list-style:none;display:flex;gap:10px;padding:0;margin:12px 0 0;flex-wrap:wrap}
.badges li{border:var(--b);padding:6px 10px}
.note{color:var(--muted);font-size:.92rem;margin-top:10px}

/* grids: одинаковая высота и стопроцентная ширина ячеек */
.grid-3{display:grid;gap:var(--gap);margin:28px auto;width:100%;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
justify-content:center;align-items:stretch;justify-items:stretch}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .cta-row{flex-direction:column;align-items:flex-start}
  .header{gap:12px}
  .btn-wide{max-width:100%}
}

/* === Fix 2025-08-28: центрируем HERO и возвращаем межсекционные отступы === */

/* Все секции внутри main имеют одинаковые вертикальные отступы */
main > section { margin: 36px auto; }

/* Группы карточек по центру с нормальным внешним отступом */
.wrap.grid-3 { margin: 36px auto; }

/* HERO делаем уже и по центру, как карточки */
.hero.frame {
  max-width: 960px;          /* подгони, если захочешь 900/980 */
  margin-left: auto;
  margin-right: auto;
}

/* На всякий, закрепим центрирование грид-групп */
.grid-3 { justify-content: center; }

/* FAQ: зазор между раскрывающимися блоками */
.faq details.frame + details.frame { margin-top: 12px; }

/* === Fix: единая ширина секций + ровные колонки === */
:root{ --contentw: 960px; }  /* общая ширина контента */

.hero.frame,
#benefits.wrap,
#how.wrap,
#price.wrap,
#faq.wrap,
#contact.wrap{
  max-width: var(--contentw);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Ровные колонки: 3 на широком, 2 на средних, 1 на узких */
#benefits.wrap.grid-3,
#how.wrap.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: stretch;
  justify-items: stretch;
}

/* 2 колонки */
@media (max-width: 980px){
  #benefits.wrap.grid-3,
  #how.wrap.grid-3{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 колонка */
@media (max-width: 640px){
  #benefits.wrap.grid-3,
  #how.wrap.grid-3{
    grid-template-columns: 1fr;
  }
}