:root{
  --bg:#0137A1;
  --text:#fff;
  --accent:#FDBF1F;
  --mosaic: rgba(0, 67, 216, 0.05);
  --mosaic2: rgba(0, 67, 216, 0.10);
  --content: 928.55px; /* из Figma */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 25.56%);
  overflow:hidden;
}

.mosaic{ position:absolute; inset:0; pointer-events:none; }
.r{
  position:absolute;
  border-radius:10px;
  background: var(--mosaic);
  mix-blend-mode: plus-lighter;
}

/* Прямо по твоим Rectangle 5–17 (как декоративный шум слева сверху) */
.r5  { width:473px; height:552px; left:-65.75px; top:-168px; }
.r6  { width:269px; height:314px; left:-173px;  top:133px; }
.r7  { width:318px; height:371px; left:-70px;   top:193px; }
.r8  { width:748px; height:873px; left:-66px;   top:-311px; background: var(--mosaic2); }
.r9  { width:533px; height:622px; left:-178px;  top:130px; }
.r10 { width:615px; height:718px; left:-208px;  top:-251px; }
.r11 { width:398px; height:465px; left:88px;    top:330px; }
.r12 { width:333px; height:389px; left:350px;   top:137px; }
.r13 { width:246px; height:287px; left:486px;   top:292px; }
.r14 { width:183px; height:213px; left:416px;   top:-142px; }
.r15 { width:465px; height:541px; left:576px;   top:92px; }
.r16 { width:323px; height:376px; left:718px;   top:-46px; }
.r17 { width:209px; height:243px; left:913px;   top:143px; }

.page{
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: 70px 0 90px; /* top из Figma */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.title{
  margin:0;
  font-weight:600;
  font-size: clamp(28px, 3vw, 50px);
  line-height: 1.3; /* 130% */
}
.accent{ color: var(--accent); }

.step{
  margin: 34px 0 18px;
  font-weight:300;
  font-size: clamp(16px, 1.6vw, 25px);
  line-height: 1.0424; /* как в Figma */
}

.shot{
  width:100%;
  margin: 0 0 40px;
}
.shot img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 15px;
}

.down{
  width:24px;
  height:24px;
  margin: 6px 0 56px;
  position:relative;
  border: 1.5px solid rgba(255,255,255,.0);
}
.down::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.shot--fade{
  position:relative;
}
.shot--fade::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 55%;
  background: linear-gradient(180deg, rgba(1,55,161,0) 9.34%, #0137A1 62.55%);
  pointer-events:none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

@media (max-width: 520px){
  .page{ width: min(var(--content), calc(100% - 28px)); padding-top: 40px; }
  .step{ line-height: 1.25; }
}