/* ============================================================
   Webolution — страница лид-магнита (исследование рынка бухгалтерского аутсорсинга)
   common.css — токены, типографика, примитивы
   Префикс проекта: wbr-
   Версия 1.0 — 22.09.2026 (каркас — страница чек-листов, префикс wcl-)
   Токены и система величин — из страницы «Бизнес-разбор»
   после правок дизайнера (скилл ira)
   ============================================================ */

:root{
  --wbr-navy:      #192449;
  --wbr-navy-2:    #212c50;
  --wbr-navy-3:    #101a3a;

  --wbr-blue:      #38a9ff;
  --wbr-blue-d:    #1c8fe6;
  --wbr-blue-l:    #4ab0fe;
  --wbr-blue-soft: #84c7fc;
  --wbr-green:     #6ec343;

  --wbr-ink:       #182449;
  --wbr-text:      #4c5572;
  --wbr-muted:     #767d94;

  --wbr-bg:        #f8f9fc;
  --wbr-bg-2:      #eef3fa;
  --wbr-bg-3:      #eaf1ff;
  --wbr-white:     #ffffff;
  --wbr-line:      #dce4f0;
  --wbr-line-dk:   rgba(255,255,255,.13);

  --wbr-container: 1290px;
  --wbr-gutter:    24px;
  --wbr-hdr-h:     86px;

  --wbr-r-sm:      12px;
  --wbr-r-md:      18px;
  --wbr-r-lg:      26px;
  --wbr-r-pill:    999px;

  --wbr-sh:        0 26px 64px -36px rgba(24,36,73,.44);
  --wbr-sh-btn:    0 12px 13px rgba(12,22,50,.6);
  --wbr-ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- сброс. :where() обнуляет вес, чтобы классы его перебивали ---------- */
.wbr-page *,
.wbr-page *::before,
.wbr-page *::after{ box-sizing:border-box; }

:where(.wbr-page) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){ margin:0; }
:where(.wbr-page) :where(ul,ol){ padding:0; list-style:none; }
:where(.wbr-page) :where(a){ color:inherit; text-decoration:none; }
.wbr-page :where(img, svg){ display:block; max-width:100%; height:auto; }
/* :where() — чтобы сброс не перебивал цвет кнопок .wbr-btn */
:where(.wbr-page) :where(button,input){ font:inherit; color:inherit; }

.wbr-page{
  margin:0;
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--wbr-ink);
  background:var(--wbr-white);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* clip, а не hidden: hidden на body делает его отдельным скролл-контейнером */
  overflow-x:clip;
}
html{ scroll-behavior:smooth; }

/* Единое начертание заголовков: Manrope Medium, без жира */
.wbr-page :where(h1,h2,h3,h4){ font-weight:500 !important; }
.wbr-page h1,
.wbr-page h2,
.wbr-page h3{
  letter-spacing:-.022em;
  line-height:1.08;
  overflow-wrap:break-word;
}

/* ---------- сетка ---------- */
.wbr-wrap{
  width:min(100% - (var(--wbr-gutter) * 2), var(--wbr-container));
  margin-inline:auto;
}
.wbr-section{
  position:relative;
  padding-block:clamp(52px,6vw,86px);
  scroll-margin-top:calc(var(--wbr-hdr-h) + 10px);
}
.wbr-section--light{ background:var(--wbr-bg); }
.wbr-section--dark{ background:var(--wbr-navy); color:#fff; }
.wbr-section--dark h2,
.wbr-section--dark h3{ color:#fff; }

/* ---------- типографика ---------- */
.wbr-h2{ font-size:clamp(30px,3.4vw,50px); max-width:17em; }
/* акцентная строка — всегда целиком, перенос задан разметкой */
.wbr-h2 span,
.wbr-accent-line{ display:block; color:var(--wbr-blue); }
.wbr-section--dark .wbr-h2 span{ color:var(--wbr-blue-l); }
/* первая строка заголовка, если она тоже в span (для подстановки из JSON) */
.wbr-h2 .wbr-h2__t1,
.wbr-section--dark .wbr-h2 .wbr-h2__t1{ color:inherit; }
.wbr-lead{
  margin-top:22px;
  max-width:60ch;
  font-size:clamp(17px,1.3vw,20px);
  line-height:1.5;
  color:var(--wbr-text);
}
.wbr-section--dark .wbr-lead{ color:rgba(255,255,255,.72); }

/* ---------- кнопки ---------- */
.wbr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:0 32px;
  border:0;
  border-radius:var(--wbr-r-pill);
  background:var(--wbr-blue);
  color:#fff;
  font-size:17px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--wbr-sh-btn);
  transition:transform .25s var(--wbr-ease), background .25s;
}
.wbr-btn:hover{ transform:translateY(-2px); background:var(--wbr-blue-d); }
.wbr-btn:focus-visible{ outline:3px solid var(--wbr-blue-soft); outline-offset:3px; }
.wbr-btn[disabled]{ opacity:.6; cursor:default; transform:none; }
.wbr-btn--ghost{
  background:transparent;
  color:var(--wbr-blue);
  border:1.5px solid rgba(56,169,255,.45);
  box-shadow:none;
}
.wbr-btn--ghost:hover{ background:rgba(56,169,255,.08); border-color:var(--wbr-blue); }

.wbr-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--wbr-blue-d);
  transition:gap .2s var(--wbr-ease);
}
.wbr-link:hover{ gap:15px; }

/* бейдж-пилюля для повторяющейся метки */
.wbr-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:4px 14px;
  border:1px solid rgba(56,169,255,.45);
  border-radius:var(--wbr-r-pill);
  font-size:14px;
  line-height:1.3;
  color:var(--wbr-blue-d);
}

.wbr-vh{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- появление блоков ---------- */
.wbr-rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--wbr-ease), transform .7s var(--wbr-ease);
}
.wbr-rv.wbr-is-in{ opacity:1; transform:none; }
.wbr-rv[data-wbr-d="1"]{ transition-delay:.07s; }
.wbr-rv[data-wbr-d="2"]{ transition-delay:.14s; }
/* без скрипта блоки видны сразу */
.wbr-no-js .wbr-rv{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .wbr-rv{ opacity:1; transform:none; transition:none; }
  .wbr-page *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

@media (max-width:1100px){ :root{ --wbr-gutter:20px; } }
@media (max-width:620px){
  :root{ --wbr-gutter:16px; --wbr-hdr-h:70px; }
  .wbr-btn{ width:100%; }
}