/* ============================================================
   LAB с Антоном Беляевым — солдаут ВТБ Арены
   Вёрстка кейса по макету Figma (YAS / node 1802-2397)
   Брейкпоинты макета: 1200 / 980 / 640 / 320
   ============================================================ */

/* ---------- ТОКЕНЫ ---------- */
:root{
  --green:#00FF8C;
  --blue:#161F84;
  --ink:#0E0E0E;
  --white:#FFFFFF;
  --grey:#D9D9D9;

  --f-head:'Druk Wide Cyr', Impact, sans-serif;   /* заголовки, цифры, капс */
  --f-body:'Inter', Arial, sans-serif;                    /* наборный текст */

  --pad:80px;      /* боковые поля */
  --radius:30px;   /* скругление верха секций */
}

/* ---------- БАЗА ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:17px;
  color:var(--blue);
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0 0 0 18px}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800}

section,footer{position:relative}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}

/* секции со скруглённым верхом наезжают на предыдущую */
.rounded-top{
  border-radius:var(--radius) var(--radius) 0 0;
  margin-top:calc(-1 * var(--radius));
}

/* ---------- ТИПОГРАФИКА ---------- */
.h2{
  font-family:var(--f-head);
  font-weight:700;
  font-size:36px;
  line-height:40px;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.h2--blue{color:var(--blue)}
.h2--green{color:var(--green)}
.h2--white{color:var(--white)}

.h3{
  font-family:var(--f-head);
  font-weight:700;
  font-size:21.5px;
  line-height:27px;
  text-transform:uppercase;
  color:var(--blue);
  letter-spacing:-0.01em;
}
.h3--sm{
  font-family:var(--f-head);
  font-weight:700;
  font-size:14px;
  line-height:17px;
  letter-spacing:-0.01em;
}
.h3--white{color:var(--white);font-size:16px;line-height:21px}

.body{font-size:15px;line-height:17px;color:var(--blue)}
.body--light{color:var(--white)}

.list{font-size:15px;line-height:17px;color:var(--blue)}
.list li{margin-bottom:8px}
.list li::marker{font-size:14px}

.lead{
  font-family:var(--f-head);
  font-weight:700;
  font-size:26px;
  line-height:27px;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.lead--blue{color:var(--blue)}
.lead--light{color:var(--white)}

.kicker{font-size:16px;line-height:20px;color:var(--blue)}

.smallcaps{
  font-family:var(--f-head);
  font-weight:700;
  font-size:13px;
  line-height:17px;
  text-transform:uppercase;
  color:var(--blue);
}

.bignum{
  font-family:var(--f-head);
  font-weight:700;
  font-size:46px;
  line-height:50px;
  color:var(--blue);
  text-transform:uppercase;
}
.bignum span{font-size:15px;line-height:15px;vertical-align:baseline;padding:0 4px}

/* три колонки — сетка макета: 80 / 433 / 787 при 1200 */
.cols3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:33px;
  row-gap:40px;
}
.cols3>*{min-width:0}
.col{overflow-wrap:break-word}

/* ---------- КНОПКА ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  height:48px;
  padding:0 24px;
  background:var(--blue);
  color:var(--green);
  font-family:var(--f-head);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* ============================================================
   1. HERO
   ============================================================ */
.s-hero{background:var(--green);padding-bottom:6px;overflow:hidden}

.nav{height:124px}
.nav__home{position:absolute;left:var(--pad);top:78px;font-size:16px;line-height:19px}
.nav__menu{position:absolute;left:350px;top:78px;display:flex;gap:22px;font-size:16px;line-height:19px}
.nav__logo{position:absolute;right:var(--pad);top:53px;z-index:4}
.nav__logo img{width:56px;height:auto}

.hero__grid{
  display:grid;
  grid-template-columns:530px 1fr;
  column-gap:0;
  padding-top:31px;
  padding-bottom:64px;
}
.hero__text{padding-top:54px}
.hero__eyebrow{
  font-family:var(--f-head);
  font-weight:700;
  font-size:22px;
  line-height:26px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--blue);
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.hero__title{
  width:503px;
  max-width:100%;
  margin:0 0 24px;
}
.hero__title img{width:100%;height:auto}
.hero__lead{font-size:24px;line-height:31px;color:var(--blue)}

.hero__media{position:relative}
.hero__photo{
  width:100%;            /* 510px при кадре 1200 */
  height:336.27px;
  object-fit:cover;
}
.hero__media .btn{position:absolute;left:20px;top:265px;z-index:3}

/* ============================================================
   2. STATS
   ============================================================ */
.s-stats{background:var(--blue);padding:83px 0 86px}
.stats{display:grid;grid-template-columns:265px 266px 1fr;align-items:flex-start}
.stat__label{
  font-family:var(--f-head);
  font-weight:700;
  font-size:14px;
  line-height:17px;
  text-transform:uppercase;
  color:var(--white);
  letter-spacing:0.02em;
  margin-bottom:20px;
}
.stat__value{
  font-family:var(--f-head);
  font-weight:700;
  font-size:36px;
  line-height:44px;
  white-space:nowrap;
  text-transform:uppercase;
  color:var(--white);
  letter-spacing:-0.01em;
}

/* ============================================================
   3. FACTS
   ============================================================ */
.s-facts{background:var(--green);padding:80px 0 78px;overflow:hidden}
.facts__photo{width:100%;height:280px;object-fit:cover}
.facts__grid{
  display:flex;
  justify-content:space-between;
  position:relative;
  padding-top:35px;
}
.facts__col--right{text-align:right}
.facts__label{font-size:15px;line-height:20px;color:var(--blue);margin-bottom:6px}
.facts__value{
  font-family:var(--f-head);
  font-weight:700;
  font-size:22px;
  line-height:26px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:34px;
}
.facts__col p:last-child{margin-bottom:0}

/* ============================================================
   4. CONTEXT
   ============================================================ */
.s-context{
  background:var(--ink) url("assets/context-bg.png") center/cover no-repeat;
  padding:80px 0 134px;
}
.s-context .h2{margin-bottom:35px}
.s-context .body{margin-bottom:38px}
.s-context .lead{margin-bottom:38px}
.s-context .body:last-child{margin-bottom:0}

/* ============================================================
   5. CHALLENGES
   ============================================================ */
.s-challenges{background:var(--white);padding:25px 0 110px}
.s-challenges .h2{margin-bottom:52px}
.s-challenges .h3{margin-bottom:27px}

/* ============================================================
   6. WAVE 1
   ============================================================ */
.s-wave1{background:var(--green);padding:48px 0 34px;overflow:hidden}
.s-wave1 .kicker{margin-bottom:27px}
.s-wave1 .h2{margin-bottom:37px}
.wave1__grid{
  display:grid;
  grid-template-columns:290px 1fr;
  column-gap:63px;
  align-items:start;
}
.wave1__poster{width:290px}
.wave1__text .h3{margin-bottom:12px}
.wave1__text .body{margin-bottom:34px;max-width:445px}
.wave1__text .body:last-child{margin-bottom:0}

/* ============================================================
   7. RESULT 2 WEEKS
   ============================================================ */
.s-result2{background:var(--green);padding:18px 0 1px;overflow:hidden}
.s-result2 .h2{margin-bottom:47px;position:relative;z-index:2}
.result2__grid{display:grid;grid-template-columns:353px 1fr;position:relative;z-index:2}
.result2__item .h3{margin-bottom:18px}

/* ============================================================
   8. WAVE 2
   ============================================================ */
.s-wave2{background:var(--green);padding:89px 0 57px}
.s-wave2 .h2{margin-bottom:36px}
.wave2__grid{
  display:grid;
  grid-template-columns:510px 1fr;
  column-gap:20px;
  align-items:start;
  margin-bottom:59px;
}
.wave2__photo{width:510px;height:300px;object-fit:cover}
.wave2__text .body{margin-bottom:20px}
.wave2__text .h3{margin-bottom:18px}

/* ============================================================
   9. WAVE 3
   ============================================================ */
.s-wave3{background:var(--green);padding:19px 0 75px;overflow:hidden}
.s-wave3 .h2{margin-bottom:35px}
.wave3__grid{
  display:grid;
  grid-template-columns:520px 1fr;
  column-gap:15px;
  align-items:start;
  margin-bottom:40px;
}
.wave3__text .h3{margin-bottom:14px}
.wave3__video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;      /* было 585/250 из макета — под видео поменял на кадр 16:9 */
  background:var(--ink);
  overflow:hidden;
  z-index:1;
}
.wave3__video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.wave3__metrics{display:grid;grid-template-columns:180px 1fr;column-gap:0;margin-bottom:35px;position:relative;z-index:2}
.wave3__metrics--single{grid-template-columns:1fr}
.metric__label{
  font-family:var(--f-head);
  font-weight:700;
  font-size:14px;
  line-height:17px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:16px;
}

/* ============================================================
   10. WAVE 4
   ============================================================ */
.s-wave4{background:var(--green);padding:89px 0 60px;overflow:hidden}
.s-wave4 .h2{margin-bottom:40px}
.wave4__grid{
  display:grid;
  grid-template-columns:510px 1fr;
  column-gap:20px;
  align-items:start;
  margin-bottom:35px;
}
.wave4__photo{width:510px;height:325px;object-fit:cover}
.wave4__text .h3{margin-bottom:18px}
.s-wave4 > .container > .body{margin-bottom:32px}

/* ============================================================
   11. CREATIVES
   ============================================================ */
.s-creatives{background:var(--white);padding:25px 0 4px;overflow:hidden}
.s-creatives .h2{margin-bottom:57px}
.s-creatives .h3--sm{margin-bottom:11px}
.s-creatives .body{margin-bottom:32px}
.s-creatives .col > *:last-child{margin-bottom:0}

/* ============================================================
   12. AUDIENCES
   ============================================================ */
.s-audiences{background:var(--white);padding:89px 0 84px}
.s-audiences .h2{margin-bottom:53px}
.s-audiences .h3--sm{margin-bottom:12px}
.s-audiences .list{margin-bottom:22px}
.s-audiences .col > *:last-child{margin-bottom:0}

/* ============================================================
   13. TOTALS
   ============================================================ */
.s-totals{
  background:var(--blue);
  padding:70px 0 90px;
  overflow:hidden;
}
.s-totals .h2{font-size:36px;line-height:40px;margin-bottom:53px}
.totals__grid{display:grid;grid-template-columns:238px 261px 1fr;margin-bottom:58px;position:relative;z-index:2}
.totals__grid--2{grid-template-columns:238px 261px 1fr;margin-bottom:0}
.total__label{
  font-family:var(--f-head);
  font-weight:700;
  font-size:14px;
  line-height:17px;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:22px;
}
.total__value{
  font-family:var(--f-head);
  font-weight:700;
  font-size:37px;
  line-height:44px;
  white-space:nowrap;
  text-transform:uppercase;
  color:var(--white);
  letter-spacing:-0.01em;
}
.total__value span{font-size:15px}

/* ============================================================
   14. CONCLUSION
   ============================================================ */
.s-conclusion{
  background:var(--ink) url("assets/conclusion-bg.png") top center/cover no-repeat;
  padding:60px 0 0;
}
.s-conclusion .h2{font-size:36px;line-height:40px;margin-bottom:36px}
.s-conclusion .h3--white{margin-bottom:16px}
.s-conclusion .body--light{margin-bottom:36px;max-width:560px}
/* финальная фраза уезжала на светлые куски фото и не читалась —
   кладём её на сплошную чёрную полосу во всю ширину, встык с футером */
.conclusion__band{
  background:var(--ink);
  margin-top:56px;
  padding:52px 0 60px;
  position:relative;
  z-index:2;
}
.conclusion__claim{
  font-family:var(--f-head);
  font-weight:700;
  font-size:22px;
  line-height:28px;
  text-transform:uppercase;
  color:var(--white);
}
.conclusion__claim span{display:inline-block;padding-left:180px}

/* ============================================================
   15. FOOTER
   ============================================================ */
.s-footer{
  background:var(--ink) url("assets/footer-bg.png") center/cover no-repeat;
  min-height:360px;
  overflow:hidden;
}
.s-footer .container{min-height:360px;display:flex;align-items:center;justify-content:center}
.footer__photo{width:334px;height:203px;object-fit:cover;position:relative;z-index:2}

/* ============================================================
   БРЕЙКПОИНТ 980
   ============================================================ */
@media (max-width:1199px){
  .hero__grid{grid-template-columns:1fr 380px;column-gap:20px}
  .hero__title{width:440px}
  
  .stats{grid-template-columns:1fr 1fr;row-gap:34px}
  .stat--wide{grid-column:1 / -1}

  .wave1__grid{grid-template-columns:250px 1fr;column-gap:40px}
  .wave1__poster{width:250px}
  .wave2__grid,.wave4__grid{grid-template-columns:420px 1fr}
  .wave2__photo,.wave4__photo{width:420px}
  .wave3__grid{grid-template-columns:1fr 380px}
  .result2__grid{grid-template-columns:300px 1fr}
  .totals__grid,.totals__grid--2{grid-template-columns:200px 225px 1fr}
  .total__value{white-space:normal}
  .conclusion__claim span{padding-left:120px}
}

/* ============================================================
   БРЕЙКПОИНТ 640
   ============================================================ */
@media (max-width:979px){
  :root{--pad:40px}

  .h2{font-size:34px;line-height:38px}
  .h3{font-size:19px;line-height:24px}
  .lead{font-size:24px;line-height:25px}
  .bignum{font-size:46px;line-height:46px}
  .stat__value,.total__value{font-size:30px;line-height:36px}
  .stat__value{white-space:normal}
  .s-totals .h2{font-size:40px;line-height:44px}

  .nav{height:100px}
  .nav__home,.nav__menu{top:60px}
  .nav__menu{gap:16px;left:200px}
  .nav__logo{top:40px}

  .hero__grid{grid-template-columns:1fr;row-gap:24px;padding-bottom:40px}
  .hero__text{padding-top:40px}
  .hero__eyebrow{font-size:16px;line-height:20px}
  .hero__title{width:100%}
  .hero__lead{font-size:20px;line-height:26px}
  .hero__photo{width:100%;height:270px}
    .hero__media .btn{left:20px;bottom:20px}

  .cols3{grid-template-columns:repeat(2,1fr);column-gap:30px}
  .s-creatives .cols3,.s-audiences .cols3{grid-template-columns:repeat(2,1fr)}

  .facts__grid{flex-direction:column}
  .facts__col--right{text-align:left}
  
  .wave1__grid{grid-template-columns:1fr;row-gap:30px}
  .wave1__poster{width:250px;justify-self:end}
  .wave2__grid,.wave4__grid,.wave3__grid{grid-template-columns:1fr;row-gap:26px}
  .wave2__photo,.wave4__photo{width:100%;height:auto}
  .wave2__grid{display:flex;flex-direction:column-reverse}
  .result2__grid{grid-template-columns:1fr;row-gap:32px}
      .wave3__metrics{grid-template-columns:1fr;row-gap:24px}
  .totals__grid,.totals__grid--2{grid-template-columns:1fr 1fr;row-gap:34px}
  .conclusion__claim span{padding-left:0}
}

/* ============================================================
   БРЕЙКПОИНТ 320
   ============================================================ */
@media (max-width:639px){
  :root{--pad:20px;--radius:20px}

  body{font-size:13px;line-height:16px}
  .body,.list{font-size:13px;line-height:16px}
  .h2{font-size:24px;line-height:27px}
  .h3{font-size:14px;line-height:18px}
  .h3--sm{font-size:14px;line-height:17px}
  .lead{font-size:16px;line-height:18px}
  .bignum{font-size:30px;line-height:32px}
  .bignum span{font-size:13px}
  .stat__label,.total__label,.metric__label{font-size:10px;line-height:13px}
  .stat__value,.total__value{font-size:18px;line-height:23px;white-space:nowrap}
  .s-totals .h2{font-size:22px;line-height:25px}
  .kicker{font-size:13px;line-height:16px}
  .smallcaps{font-size:12px;line-height:15px}

  .nav{height:68px}
  .nav__home,.nav__menu{display:none}
  .nav__logo{left:var(--pad);right:auto;top:22px}
  .nav__logo img{width:32px;height:40px}

  .hero__grid{padding-top:10px}
  .hero__text{padding-top:0}
  .hero__eyebrow{font-size:9px;line-height:12px;margin-bottom:6px}
  .hero__title{width:100%;margin-bottom:14px}
  .hero__lead{font-size:13px;line-height:16px}
  .hero__photo{height:190px}
    .hero__media .btn{position:static;margin-top:16px;width:100%;min-width:0;height:36px;font-size:13px}

  .cols3{grid-template-columns:1fr;row-gap:26px}
  .s-creatives .cols3,.s-audiences .cols3{grid-template-columns:1fr}

  .s-stats{padding:30px 0 34px}
  .stats{gap:24px}
  .stat{flex:1 1 45%}

  .s-facts{padding:30px 0 30px}
  .facts__photo{height:150px}
  .facts__value{font-size:15px;line-height:18px;margin-bottom:18px}
  .facts__label{font-size:12px;margin-bottom:4px}
  
  .s-context,.s-challenges,.s-wave1,.s-result2,.s-wave2,
  .s-wave3,.s-wave4,.s-creatives,.s-audiences,.s-totals,.s-conclusion{
    padding-top:30px;padding-bottom:34px;
  }
  .s-challenges,.s-creatives{padding-top:24px}

  .wave1__poster{width:100%;justify-self:stretch}
  .wave2__photo,.wave4__photo{width:100%}
  .wave3__metrics{row-gap:16px;margin-bottom:20px}
  .totals__grid,.totals__grid--2{grid-template-columns:1fr;row-gap:22px;margin-bottom:22px}
  .conclusion__claim{font-size:16px;line-height:19px}
  .s-footer,.s-footer .container{min-height:220px}
  .footer__photo{width:200px;height:122px}
}

/* ============================================================
   АНИМАЦИИ
   Работают только когда подключён assets/anim.js и пользователь
   не просил уменьшить движение. Без JS страница статична и целая.
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.75,.24,1);
  --py:0px;                       /* сдвиг параллакса, пишет anim.js */
}

/* --- подъём с прозрачностью --- */
.anim-on [data-anim="fade"]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .7s var(--ease) var(--d,0ms),
             transform .7s var(--ease) var(--d,0ms);
}
.anim-on [data-anim="fade"].is-in{opacity:1;transform:none}

/* --- «вытирание» маской: заголовки слева направо, картинки снизу вверх.
       Именно маской, а не clip-path: clip-path обнуляет площадь элемента
       и IntersectionObserver перестаёт его замечать. --- */
.anim-on [data-anim="wipe"]{
  opacity:0;
  -webkit-mask-image:linear-gradient(90deg,#000,#000);
          mask-image:linear-gradient(90deg,#000,#000);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:0 0;      mask-position:0 0;
  -webkit-mask-size:0% 100%;      mask-size:0% 100%;
  transition:opacity .3s linear var(--d,0ms),
             -webkit-mask-size .85s var(--ease) var(--d,0ms),
             mask-size .85s var(--ease) var(--d,0ms);
}
.anim-on img[data-anim="wipe"],
.anim-on .wave3__video[data-anim="wipe"]{
  -webkit-mask-position:0 100%;   mask-position:0 100%;
  -webkit-mask-size:100% 0%;      mask-size:100% 0%;
}
.anim-on [data-anim="wipe"].is-in{
  opacity:1;
  -webkit-mask-size:100% 100%;    mask-size:100% 100%;
}
/* заголовок героя вытирается медленнее — он главный */
.anim-on .hero__title[data-anim]{transition-duration:.3s,1.15s,1.15s}

/* --- параллакс на секциях с фото на всю ширину --- */
.s-context,.s-conclusion,.s-footer{
  background-position:center calc(50% + var(--py));
}

/* --- полоса прогресса чтения: инвертирует то, что под ней,
       поэтому видна и на кислотном, и на синем, и на белом --- */
.progress{
  position:fixed;
  left:0;top:0;
  width:100%;height:3px;
  background:#fff;
  mix-blend-mode:difference;
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:100;
  pointer-events:none;
}

/* --- интерактив --- */
.btn{position:relative;overflow:hidden;z-index:0;transition:color .35s var(--ease)}
.btn::before{
  content:'';
  position:absolute;inset:0;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .4s var(--ease);
  z-index:-1;
}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--blue)}

.nav__home,.nav__menu a{position:relative}
.nav__home::after,.nav__menu a::after{
  content:'';
  position:absolute;
  left:0;bottom:-3px;
  width:100%;height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.nav__home:hover::after,.nav__menu a:hover::after{transform:scaleX(1)}

.nav__logo{display:block;transition:transform .4s var(--ease)}
.nav__logo:hover{transform:rotate(-6deg) scale(1.06)}

@media (prefers-reduced-motion: reduce){
  .anim-on [data-anim]{
    opacity:1!important;transform:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    transition:none!important;
  }
  .progress{display:none}
  .s-context,.s-conclusion,.s-footer{background-position:center}
}

/* ============================================================
   ПЕРЕЛИСТЫВАНИЕ СЕКЦИЙ
   Секция со скруглённым верхом наезжает на предыдущую, как страница.
   Предыдущая прибивается sticky-снизу: доезжает последним экраном
   до низа окна и замирает, пока следующая её накрывает.
   Классы .pin / .rides и лесенку z-index раздаёт anim.js.
   ============================================================ */
.anim-on .pin{position:sticky;top:var(--stick,0px)}

/* уходящая страница уходит в тень по мере накрытия */
.anim-on .pin::after{
  content:'';
  position:absolute;inset:0;
  background:var(--ink);
  opacity:calc(var(--out,0) * .48);
  pointer-events:none;
  z-index:20;
}
/* наезжающая — с тенью по верхней кромке, чтобы читался слой */
.anim-on .rides{box-shadow:0 -28px 64px rgba(14,14,14,.32)}

@media (prefers-reduced-motion: reduce){
  .anim-on .pin{position:relative;top:0}
  .anim-on .pin::after{display:none}
  .anim-on .rides{box-shadow:none}
}

/* ============================================================
   ЩУПАЛЬЦА
   Вектор из Figma (SVG-экспорт фрейма), координаты — из макета 1200.
   Слой шириной в кадр макета, центрируется вместе с контентом,
   поэтому позиции остаются на месте на любой ширине окна.
   ============================================================ */
.deco{position:absolute;left:50%;transform:translateX(-50%);top:0;
  width:100%;max-width:1200px;height:100%;pointer-events:none;z-index:0}
.deco--front{z-index:3}
.deco__i{position:absolute;max-width:none;height:auto}
/* щупальце в герое: контур гнётся скриптом по хребту, вектор не растрируется */
.deco--hero-tent{
  left:68.58%;             /* 823 из кадра 1200 */
  top:-147px;
  width:42.53%;            /* 510.4 из 1200 */
  aspect-ratio:510.4/429.1;
}
.deco--hero-tent svg{width:100%;height:100%;display:block;transform:scaleY(-1)}
.tent-mx{transform-origin:0 0;transform:matrix(0.9,0.44,0.44,-0.9,0,0)}
.deco--result2-arch{left:auto;right:-13.5%;top:6px;width:32.85%}
.deco--wave3-projector{left:80.785%;top:20px;width:27.810%}
.deco--wave4-left{left:-17.717%;top:249px;width:28.617%}
.deco--totals-curl-a{left:92.667%;top:-46px;width:22.508%}
.deco--totals-curl-b{left:72.492%;top:19px;width:34.967%}
.deco--footer-left{left:-33.592%;top:33px;width:67.058%}
.deco--footer-right{left:65.950%;top:145px;width:45.183%}

/* на узких макетах щупальца в Figma стоят иначе — до отдельной выгрузки прячем */
@media (max-width:979px){.deco{display:none}}