/* ============================================================
   Easy Up — раскладка
   ============================================================ */

/* ---------- Шапка ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-block:1.1rem;
  background:rgba(246,245,242,0);
  transition:background-color var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out),
             padding var(--d-base) var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(246,245,242,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
  padding-block:.7rem;
}
.nav__in{display:flex; align-items:center; gap:var(--s-8)}

.brand{display:flex; align-items:center; gap:.7rem; flex:none}
.brand__mark{width:30px; height:30px; flex:none}
.brand__name{
  font-family:var(--font-display); font-weight:800;
  font-size:1.0625rem; letter-spacing:-.04em; line-height:1; white-space:nowrap;
}
.brand__name em{font-style:normal; color:var(--accent)}

.nav__links{display:flex; gap:var(--s-8); margin-left:auto; font-size:.9375rem}
.nav__links a{color:var(--muted); position:relative; padding-block:.3rem;
  transition:color var(--d-micro)}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition:right var(--d-base) var(--e-out);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{flex:none}
.nav__cta .btn{padding:.65rem 1.4rem}

.nav__burger{display:none; width:44px; height:44px; margin-left:auto; place-items:center}
.nav__burger span{display:block; width:22px; height:1.6px; background:var(--ink); position:relative}
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1.6px; background:var(--ink);
  transition:transform var(--d-base) var(--e-out);
}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav__burger{display:grid}
  .nav__links{
    position:fixed; inset:0 0 auto; padding:6rem 1.75rem 2.5rem;
    background:var(--paper); flex-direction:column; gap:0; margin-left:0;
    transform:translateY(-102%); transition:transform .55s var(--e-out);
    border-bottom:1px solid var(--line);
  }
  .nav.is-open .nav__links{transform:none}
  .nav__links a{font-family:var(--font-display); font-size:1.6rem;
    font-weight:800; letter-spacing:-.03em; color:var(--ink); padding-block:.65rem}
  .nav__cta{display:none}
}

/* ---------- Первый экран ---------- */
.hero{padding:11rem 0 var(--s-16); position:relative}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.hero__text{min-width:0}
.hero h1{
  font-size:clamp(3rem, 5.6vw, 5.5rem);
  letter-spacing:-.045em;
  line-height:.98;
  margin-top:var(--s-6);
  max-width:12ch;
}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lead{margin-top:var(--s-6); max-width:42ch; font-size:clamp(1.1875rem,1.4vw,1.375rem)}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8)}

.hero__proof{
  margin-top:clamp(3rem,5vw,4.5rem);
  padding-top:var(--s-6);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s-6);
}
.hero__proof dt{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.875rem,2.8vw,2.5rem); letter-spacing:-.04em; line-height:1;
}
.hero__proof dd{margin-top:.45rem; color:var(--muted); font-size:.9375rem; line-height:1.4}

/* витрина справа: один крупный артефакт и два поменьше */
.hero__show{position:relative; min-width:0; display:grid;
  grid-template-columns:1fr 1fr; gap:var(--s-4); align-content:center}
.hero__show figure{
  border-radius:12px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line); box-shadow:var(--shadow-lift);
  transition:transform .7s var(--e-out);
}
.hero__show img{width:100%; height:100%; object-fit:cover; display:block}
.hero__show .sh1{grid-column:1 / -1; aspect-ratio:16/10}
.hero__show .sh2{aspect-ratio:3/4}
.hero__show .sh3{aspect-ratio:3/4}
.hero__show figure:hover{transform:translateY(-6px)}

@media (max-width:1040px){
  .hero__in{grid-template-columns:1fr}
  .hero h1{max-width:14ch}
  .hero__show{grid-template-columns:repeat(3,1fr); margin-top:var(--s-8)}
  .hero__show .sh1{grid-column:auto; aspect-ratio:3/4}
}
@media (max-width:640px){
  .hero{padding-top:8.5rem}
  .hero h1{max-width:none}
  .hero__show{display:none}
}
@media (prefers-reduced-motion:reduce){ .hero__show figure:hover{transform:none} }

/* ---------- Полоса системы: шесть поверхностей ---------- */
.system{background:var(--ink); color:var(--on-ink); padding-block:clamp(4rem,7vw,6rem);
  overflow:hidden}
.system__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s-6); margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.system__head h2{font-size:clamp(1.5rem,2.6vw,2.25rem); max-width:22ch; color:var(--on-ink)}
.system__head p{color:var(--on-ink-muted); font-size:var(--t-small); max-width:34ch; line-height:1.6}

.system__row{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-4);
  align-items:end;
}
.surface{min-width:0}
.surface figure{
  border-radius:8px; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--line-on-ink);
  transition:transform .6s var(--e-out), border-color .4s var(--e-out);
}
.surface img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.surface--tall figure{aspect-ratio:9/16}
.surface--wide figure{aspect-ratio:4/3}
.surface--card figure{aspect-ratio:3/4}
.surface:hover figure{transform:translateY(-6px); border-color:rgba(246,245,242,.34)}
.surface figcaption{margin-top:var(--s-3); font-size:var(--t-caption); letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-ink-muted); font-weight:600}

@media (max-width:1100px){ .system__row{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .system__row{grid-template-columns:repeat(2,1fr); gap:var(--s-3)} }
@media (prefers-reduced-motion:reduce){ .surface:hover figure{transform:none} }

/* ---------- Бегущая строка ---------- */
.ticker{border-block:1px solid var(--line); padding-block:1rem; overflow:hidden;
  background:var(--paper-2)}
.ticker__track{display:flex; gap:2.5rem; width:max-content; animation:tick 9s linear infinite}
.ticker span{font-size:var(--t-small); color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; gap:2.5rem}
.ticker span::after{content:""; width:5px; height:5px; border-radius:1px; background:var(--accent)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} }

/* ---------- Сквозной кейс ---------- */
.flag{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center}
.flag__list{margin-top:var(--s-8); display:grid; gap:var(--s-4)}
.flag__list li{display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:var(--t-small); color:var(--on-ink-muted); line-height:1.5}
.flag__list b{color:var(--on-ink); font-weight:600}
.flag__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3)}
.flag__grid figure{border-radius:8px; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--line-on-ink)}
.flag__grid figure:first-child{grid-column:span 2; grid-row:span 2}
.flag__grid img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.flag__grid figure:first-child img{aspect-ratio:16/10}
@media (max-width:860px){
  .flag{grid-template-columns:1fr}
  .flag__grid figure:first-child{grid-column:span 3}
}

/* ---------- Направления ---------- */
.dirs{display:grid; gap:var(--s-4)}
.dir{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(1.6rem,3vw,2.5rem);
  display:grid; grid-template-columns:minmax(220px,.85fr) 2fr;
  gap:clamp(1.5rem,3vw,3rem);
  transition:border-color var(--d-base) var(--e-out);
}
.dir:hover{border-color:var(--line-2)}
.dir__no{font-family:var(--font-display); font-size:.8125rem; font-weight:700;
  color:var(--accent); letter-spacing:.06em}
.dir__head h3{margin:.6rem 0 .7rem}
.dir__head p{color:var(--muted); font-size:var(--t-small); line-height:1.55; max-width:32ch}
.dir__price{margin-top:var(--s-4); font-size:var(--t-small)}
.dir__price b{font-weight:600}
.dir__price span{display:block; color:var(--muted-2); font-size:.875rem; margin-top:.2rem}
.dir__list{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-4) var(--s-6)}
.dir__list li{border-top:1px solid var(--line); padding-top:.8rem}
.dir__list b{display:block; font-size:var(--t-small); font-weight:600}
.dir__list span{display:block; margin-top:.25rem; color:var(--muted);
  font-size:.9375rem; line-height:1.45}
@media (max-width:860px){ .dir{grid-template-columns:1fr} .dir__head p{max-width:none} }

/* ---------- Сетка работ ---------- */
.works{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-4)}
.work{grid-column:span 3; overflow:hidden}
.work--wide{grid-column:span 6}
.work__media{overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--line)}
.work__media img{width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform 1s var(--e-out)}
.work--wide .work__media img{aspect-ratio:21/9}
.work:hover .work__media img{transform:scale(1.03)}
.work__body{padding:var(--s-6)}
.work__cat{font-size:var(--t-caption); text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); font-weight:600}
.work__body h3{margin:.6rem 0 .5rem}
.work__body p{color:var(--muted); font-size:var(--t-small); line-height:1.55}
.work__more{margin-top:var(--s-4)}
@media (max-width:860px){ .works{grid-template-columns:1fr}
  .work,.work--wide{grid-column:span 1} }

/* ---------- Почему шесть ---------- */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-8)}
.why__col h3{margin-bottom:var(--s-3)}
.why__col p{color:var(--muted); font-size:var(--t-small); line-height:1.65}
.why__vs{display:grid; gap:var(--s-3); margin-top:var(--s-6)}
.why__vs li{display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:var(--t-small); line-height:1.5}

/* ---------- Процесс ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-8)}
.step{border-top:2px solid var(--ink); padding-top:var(--s-4)}
.step__no{font-family:var(--font-display); font-weight:800; font-size:.8125rem;
  color:var(--accent); letter-spacing:.06em}
.step h3{margin:.7rem 0 .5rem; font-size:1.125rem}
.step p{color:var(--muted); font-size:var(--t-small); line-height:1.55}
.step__out{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink)}
.step__out b{font-weight:600; color:var(--accent)}

/* ---------- Границы ---------- */
.bounds{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-6)}
.bound{padding:var(--s-6); border-radius:var(--r-card); border:1px solid var(--line); background:#fff}
.bound h3{font-size:1.0625rem; margin-bottom:var(--s-3)}
.bound p{color:var(--muted); font-size:var(--t-small); line-height:1.6}

/* ---------- Вопросы ---------- */
.faq{display:grid; gap:.6rem; max-width:62rem}
.faq__item{border:1px solid var(--line); border-radius:var(--r-card); background:#fff;
  transition:border-color var(--d-base) var(--e-out)}
.faq__item[open]{border-color:var(--line-2)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:1.3rem 1.5rem; cursor:pointer; list-style:none;
  font-size:var(--t-small); font-weight:600;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{width:18px; height:18px; position:relative; flex:none}
.faq__item summary i::before,.faq__item summary i::after{
  content:""; position:absolute; background:var(--accent); border-radius:1px;
  transition:transform var(--d-base) var(--e-out), opacity var(--d-micro);
}
.faq__item summary i::before{left:0; right:0; top:8px; height:2px}
.faq__item summary i::after{top:0; bottom:0; left:8px; width:2px}
.faq__item[open] summary i::after{transform:scaleY(0); opacity:0}
.faq__a{padding:0 1.5rem 1.4rem}
.faq__a p{color:var(--muted); font-size:var(--t-small); line-height:1.7; max-width:64ch}

/* ---------- Контакты ---------- */
.contact__ways{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8)}
.contact__person{margin-top:var(--s-12); padding-top:var(--s-6);
  border-top:1px solid var(--line-on-ink); display:flex; align-items:center; gap:var(--s-4)}
.contact__ava{width:52px; height:52px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:var(--accent); color:var(--paper);
  font-family:var(--font-display); font-weight:800; font-size:1.3rem}
.contact__person b{display:block; font-weight:600; color:var(--on-ink)}
.contact__person span{color:var(--on-ink-muted); font-size:var(--t-small)}

/* ---------- Подвал ---------- */
.footer{border-top:1px solid var(--line); padding-block:var(--s-12) var(--s-8);
  background:var(--paper-2)}
.footer__top{display:grid; grid-template-columns:1.4fr repeat(2,1fr); gap:var(--s-8);
  padding-bottom:var(--s-8); border-bottom:1px solid var(--line)}
.footer__top p{color:var(--muted); font-size:var(--t-small); max-width:34ch; margin-top:var(--s-3)}
.footer h4{font-size:var(--t-caption); text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted-2); font-weight:600; margin-bottom:var(--s-4)}
.footer nav{display:grid; gap:.55rem}
.footer nav a{font-size:var(--t-small); color:var(--ink); transition:color var(--d-micro)}
.footer nav a:hover{color:var(--accent)}
.footer__bottom{display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-8);
  justify-content:space-between; padding-top:var(--s-6);
  color:var(--muted-2); font-size:.875rem}
@media (max-width:760px){ .footer__top{grid-template-columns:1fr} }

/* ============================================================
   Страница кейса
   ============================================================ */
.cs{padding-top:9rem}
.crumbs{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:.875rem; color:var(--muted-2); margin-bottom:var(--s-8)}
.crumbs a{color:var(--muted); transition:color var(--d-micro)}
.crumbs a:hover{color:var(--accent)}

.cs__head{max-width:58rem}
.cs__head h1{margin-top:var(--s-6)}
.cs__head .lead{margin-top:var(--s-6); max-width:50ch}
.cs__meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s-6); margin-top:var(--s-12); padding-top:var(--s-6); border-top:1px solid var(--line)}
.cs__meta dt{font-size:var(--t-caption); text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted-2); font-weight:600}
.cs__meta dd{margin-top:.45rem; font-size:var(--t-small)}

.cs__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,4vw,3.5rem); margin-top:var(--s-16)}
.cs__cols h2{font-size:var(--t-h3); margin-bottom:var(--s-4)}
.cs__cols p{color:var(--muted); line-height:1.75}
.cs__cols p + p{margin-top:var(--s-4)}

.cs__limits{margin-top:var(--s-16); padding:var(--s-8); border-radius:var(--r-card);
  background:var(--paper-2); border:1px solid var(--line)}
.cs__limits h2{font-size:var(--t-h3); margin-bottom:var(--s-6)}
.cs__limits ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-4)}
.cs__limits li{display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:var(--t-small); line-height:1.55}

.cs__key{margin-top:var(--s-24); padding:var(--s-12) 0; border-block:2px solid var(--ink)}
.cs__key p:first-child{font-size:var(--t-caption); text-transform:uppercase;
  letter-spacing:.14em; color:var(--accent); font-weight:600; margin-bottom:var(--s-6)}
.cs__key h2{font-size:var(--t-h2); max-width:22ch}
.cs__key .why{margin-top:var(--s-6); color:var(--muted); max-width:60ch; line-height:1.75}

.cs__block{margin-top:var(--s-24)}
.cs__block > h2{font-size:var(--t-h2); margin-bottom:var(--s-4)}
.cs__block > p.lead{margin-bottom:var(--s-12)}

.shots{display:grid; gap:var(--s-8)}
.shot figure{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line);
  background:var(--paper-2)}
.shot img{width:100%; height:auto}
.shot figcaption{margin-top:var(--s-4); color:var(--muted); font-size:var(--t-small);
  line-height:1.6; max-width:72ch}
.shot figcaption b{color:var(--ink); font-weight:600}

.shots--pair{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.shots--phones{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s-6)}
.shots--phones figure{border-radius:18px}
.shots--cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-6)}

.cs__nav{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); margin-top:var(--s-24)}
.cs__nav a{border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-6);
  background:#fff; transition:border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out)}
.cs__nav a:hover{border-color:var(--accent); transform:translateY(-3px)}
.cs__nav span{display:block; font-size:var(--t-caption); text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted-2); font-weight:600}
.cs__nav b{display:block; margin-top:.5rem; font-size:var(--t-small); font-weight:600}
.cs__nav .next{text-align:right}
@media (max-width:640px){ .cs__nav{grid-template-columns:1fr} .cs__nav .next{text-align:left} }

/* ============================================================
   Страница направления
   ============================================================ */
.sv{padding-top:9rem}
.sv__head{max-width:56rem}
.sv__head h1{margin-top:var(--s-6)}
.sv__head .lead{margin-top:var(--s-6)}
.price{width:100%; border-collapse:collapse; margin-top:var(--s-8)}
.price th{text-align:left; font-size:var(--t-caption); text-transform:uppercase;
  letter-spacing:.13em; color:var(--muted-2); font-weight:600;
  padding:0 var(--s-4) var(--s-3); border-bottom:1px solid var(--line-2)}
.price td{padding:var(--s-4); border-bottom:1px solid var(--line); font-size:var(--t-small);
  vertical-align:top}
.price td:first-child{font-weight:600}
.price td:nth-child(2){white-space:nowrap; font-variant-numeric:tabular-nums}
.price td:last-child{color:var(--muted); white-space:nowrap}
.price tr:hover td{background:var(--paper-2)}
@media (max-width:640px){
  .price thead{display:none}
  .price tr{display:block; padding:var(--s-4) 0; border-bottom:1px solid var(--line)}
  .price td{display:block; padding:.2rem 0; border:none}
  .price td:first-child{font-size:var(--t-body)}
}

.note{margin-top:var(--s-8); padding:var(--s-6); border-left:3px solid var(--accent);
  background:var(--paper-2); border-radius:0 var(--r-card) var(--r-card) 0}
.note h3{font-size:1.0625rem; margin-bottom:var(--s-3)}
.note p{color:var(--muted); font-size:var(--t-small); line-height:1.65}
.note ul{margin-top:var(--s-3); display:grid; gap:.4rem}
.note li{display:flex; gap:var(--s-3); font-size:var(--t-small); color:var(--muted)}

.footer__h{font-size:var(--t-caption); text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); font-weight:600; margin-bottom:var(--s-4)}

/* ---------- Иконки в блоках ---------- */
.ic{
  width:46px; height:46px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-wash); border:1px solid rgba(27,47,224,.14);
  margin-bottom:var(--s-4);
}
.ic svg{width:23px; height:23px; stroke:var(--accent); stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.section--ink .ic{background:rgba(246,245,242,.08); border-color:var(--line-on-ink)}
.section--ink .ic svg{stroke:var(--on-ink)}

.dir__head .ic{margin-bottom:var(--s-4)}
.step .ic{width:38px; height:38px; border-radius:9px; margin-bottom:var(--s-3)}
.step .ic svg{width:19px; height:19px}
.bound .ic{width:40px; height:40px; border-radius:10px; margin-bottom:var(--s-4)}
.bound .ic svg{width:20px; height:20px}

/* ---------- Крупный знак: брендовая секция ---------- */
.brandmark{
  padding-block:clamp(4rem,8vw,7rem);
  border-block:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
}
.brandmark__in{display:grid; grid-template-columns:auto 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center}
.brandmark__sign{width:clamp(140px,18vw,220px); height:auto; flex:none}
.brandmark__sign rect{fill:var(--accent)}
.brandmark h2{font-size:var(--t-h2); max-width:20ch}
.brandmark p{margin-top:var(--s-6); color:var(--muted); max-width:56ch; line-height:1.7}
.brandmark__rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-6); margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--line-2)}
.brandmark__rules b{display:block; font-size:var(--t-small); font-weight:600}
.brandmark__rules span{display:block; margin-top:.3rem; color:var(--muted); font-size:.9375rem; line-height:1.5}
@media (max-width:760px){
  .brandmark__in{grid-template-columns:1fr}
  .brandmark__sign{width:120px}
}

/* ============================================================
   Парящие анимации
   ============================================================ */
@keyframes float-a{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(-.5deg)}
}
@keyframes float-b{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(.6deg)}
}
@keyframes float-c{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

/* витрина в первом экране парит */
.hero__show .sh1{animation:float-a 7s ease-in-out infinite}
.hero__show .sh2{animation:float-b 8.5s ease-in-out infinite .8s}
.hero__show .sh3{animation:float-c 9.5s ease-in-out infinite 1.6s}
.hero__show figure:hover{animation-play-state:paused; transform:translateY(-8px)}

/* поверхности в полосе системы дышат */
.system__row .surface:nth-child(1) figure{animation:float-a 8s ease-in-out infinite}
.system__row .surface:nth-child(2) figure{animation:float-b 9s ease-in-out infinite .5s}
.system__row .surface:nth-child(3) figure{animation:float-c 10s ease-in-out infinite 1s}
.system__row .surface:nth-child(4) figure{animation:float-a 8.5s ease-in-out infinite 1.5s}
.system__row .surface:nth-child(5) figure{animation:float-b 9.5s ease-in-out infinite 2s}
.system__row .surface:nth-child(6) figure{animation:float-c 11s ease-in-out infinite 2.5s}

/* мягкое свечение за витриной */
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:min(70vw,900px); aspect-ratio:1; right:-8%; top:-14%;
  background:radial-gradient(circle, rgba(27,47,224,.07) 0%, transparent 62%);
  animation:float-c 14s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .hero__show .sh1,.hero__show .sh2,.hero__show .sh3,
  .system__row .surface figure,.hero::before{animation:none}
}