/* Первый экран: оффер, три цифры исследования, форма.
   Колонки неравные: текст шире. Справа — стопка страниц PDF (альбомные
   слайды 16:9) под наклоном, форма лежит поверх них —
   одна композиция, а не картинка плюс форма рядом.
   Фон — фирменные свечение и дуга из дисков. */

.wbr-hero{
  position:relative;
  overflow:hidden;
  background:var(--wbr-navy);
  color:#fff;
  isolation:isolate;
}
.wbr-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:calc(50% - 320px);
  top:-420px;
  width:2047px;
  height:1866px;
  background:url(../../img/hero-glow.svg) center / 100% 100% no-repeat;
  transform:rotate(-137.59deg) skewX(-5.29deg);
  opacity:.9;
  pointer-events:none;
}
.wbr-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:calc(50% + 60px);
  top:260px;
  width:1624px;
  height:855px;
  background:url(../../img/hero-coins.webp) -351px 0 / 2074px 855px no-repeat;
  opacity:.8;
  pointer-events:none;
}

.wbr-hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,96px);
  align-items:center;
  padding-block:72px 88px;
}

.wbr-hero__eyebrow{
  color:#2fa5ff;
  font-size:22px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.03em;
}
.wbr-hero__title{
  margin-top:14px;
  font-size:60px;
  line-height:1;
  letter-spacing:-.018em;
}
.wbr-hero__title span{ display:block; color:var(--wbr-blue-l); }
.wbr-hero__title .wbr-hero__t1{ color:#fff; }
.wbr-hero__lead{
  margin-top:24px;
  max-width:560px;
  font-size:20px;
  line-height:1.55;
  color:rgba(255,255,255,.8);
}

/* что внутри: число — главное, по нему глаз и считывает объем */
.wbr-hero__list{
  display:grid;
  gap:26px;
  margin-top:48px;
}
.wbr-hero__list li{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:0 20px;
  align-items:baseline;
}
/* число на одной базовой линии с названием, пояснение — строкой ниже */
.wbr-hero__num{
  grid-row:1;
  font-size:44px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--wbr-blue-l);
}
.wbr-hero__list b{
  grid-column:2;
  display:block;
  font-size:22px;
  font-weight:500;
  line-height:1.25;
  color:#fff;
}
.wbr-hero__list span:not(.wbr-hero__num){
  grid-column:2;
  display:block;
  margin-top:6px;
  font-size:17px;
  line-height:1.45;
  color:rgba(255,255,255,.62);
}

/* правая колонка: стопка обложек и форма поверх */
.wbr-hero__side{
  position:relative;
  padding-top:170px;
}
.wbr-covers{
  position:absolute;
  z-index:0;
  top:0;
  left:50%;
  width:380px;
  height:214px;
  transform:translateX(-50%);
  pointer-events:none;
}
.wbr-covers img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
}
/* наклон стопки: настоящие листы, а не слои в макете */
.wbr-covers img:nth-child(1){ transform:translate(-110px,34px) rotate(-8deg); }
.wbr-covers img:nth-child(2){ transform:translate(110px,28px) rotate(7deg); }
.wbr-covers img:nth-child(3){ transform:translate(0,-10px) rotate(-1deg); }

@media (max-width:1180px){
  .wbr-hero__title{ font-size:clamp(44px,5vw,56px); }
  .wbr-covers{ width:330px; height:186px; }
  .wbr-hero__side{ padding-top:150px; }
  .wbr-covers img:nth-child(1){ transform:translate(-80px,30px) rotate(-8deg); }
  .wbr-covers img:nth-child(2){ transform:translate(80px,24px) rotate(7deg); }
}

@media (max-width:900px){
  .wbr-hero::after{ display:none; }
  .wbr-hero__in{
    grid-template-columns:minmax(0,1fr);
    padding-block:48px 56px;
  }
  .wbr-hero__title{ font-size:clamp(38px,8vw,52px); }
  .wbr-hero__list{ margin-top:36px; }
  .wbr-hero__side{ padding-top:170px; }
  .wbr-covers{ width:320px; height:180px; }
  .wbr-covers img:nth-child(1){ transform:translate(-90px,26px) rotate(-8deg); }
  .wbr-covers img:nth-child(2){ transform:translate(90px,20px) rotate(7deg); }
}
@media (max-width:620px){
  .wbr-hero__in{ padding-block:36px 44px; }
  .wbr-hero__eyebrow{ font-size:18px; }
  .wbr-hero__title{ font-size:clamp(34px,10vw,44px); line-height:1.02; }
  .wbr-hero__lead{ font-size:17px; }
  .wbr-hero__list li{ grid-template-columns:52px minmax(0,1fr); gap:0 14px; }
  .wbr-hero__num{ font-size:34px; }
  .wbr-hero__list b{ font-size:19px; }
  .wbr-hero__side{ padding-top:130px; }
  .wbr-covers{ width:240px; height:135px; }
  .wbr-covers img:nth-child(1){ transform:translate(-56px,22px) rotate(-8deg); }
  .wbr-covers img:nth-child(2){ transform:translate(56px,18px) rotate(7deg); }
}