/* ============================================================================
   gpb.css v3 — баннеры каталога ГИКПРОМ
   Правила, по которым это собрано:
     · никаких плашек и рамок внутри кадра — только свет, тень и типографика;
     · один вход с хореографией (задержка задаётся в разметке через --d);
     · idle-движение длинное и малоамплитудное, чтобы не мельтешило;
     · движение только по opacity/transform/clip-path/stroke-dashoffset.
   .gpb--dark / --field / --light   оформления
   .gpb--v                          вертикальный, в колонку фильтра
   ============================================================================ */

.gpb{
  --ink:#0a1120;
  --navy:#1b2336;
  --acc:#43c16d;
  --acc-l:#7ef2ab;
  --cta:#ff6635;
  --hair:rgba(255,255,255,.13);
  --e:cubic-bezier(.16,1,.3,1);          /* мягкий выход, как power4.out */
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Roboto Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --px:0; --py:0; --mx:64%; --my:44%;

  position:relative; display:block; overflow:hidden; isolation:isolate;
  min-height:270px; margin:0 0 22px; border-radius:12px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.gpb *{box-sizing:border-box}

/* ---------------------------------------------------------------- слои ---- */
.gpb__bg,.gpb__scene{position:absolute; inset:0; pointer-events:none}
.gpb__bg{z-index:1}
.gpb__scene{z-index:2}
.gpb__body{position:relative; z-index:3; min-height:270px; display:flex; flex-direction:column;
  justify-content:center; padding:22px 30px 22px 34px; max-width:56%}

/* ------------------------------------------------------------ хореография - */
.gpb [data-in]{opacity:0}
.gpb.is-in [data-in="up"]  {animation:gpb-up   .95s var(--e) both var(--d,0s)}
.gpb.is-in [data-in="fade"]{animation:gpb-fade 1.1s var(--e) both var(--d,0s)}
.gpb.is-in [data-in="pop"] {animation:gpb-pop  .85s var(--e) both var(--d,0s)}
@keyframes gpb-up  {from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes gpb-fade{from{opacity:0}                              to{opacity:1}}
@keyframes gpb-pop {from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}

/* -------------------------------------------------------------- текст ----- */
.gpb__eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font:600 10.5px/1 var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.gpb__eyebrow::before{
  content:""; width:22px; height:1px; background:var(--acc); flex:none; transform-origin:left;
}
.gpb.is-in .gpb__eyebrow::before{animation:gpb-rule .9s var(--e) both .1s}
@keyframes gpb-rule{from{transform:scaleX(0)} to{transform:scaleX(1)}}

.gpb__h{margin:0; font:700 clamp(23px,2.15vw,32px)/1.1 var(--sans); letter-spacing:-.022em}
.gpb__h i{font-style:normal; color:var(--acc-l)}
.gpb__h .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.gpb__h .ln > span{display:block; transform:translateY(112%)}
.gpb.is-in .gpb__h .ln > span{animation:gpb-line 1.05s var(--e) both var(--d,0s)}
@keyframes gpb-line{from{transform:translateY(112%)} to{transform:none}}

.gpb__lead{margin:10px 0 0; max-width:46ch; font:400 13.5px/1.5 var(--sans); color:rgba(255,255,255,.62)}

.gpb__spec{display:inline-flex; align-self:flex-start; margin:16px 0 0; padding:0; list-style:none}
.gpb__spec li{flex:0 0 auto; min-width:106px; padding:0 16px; border-left:1px solid var(--hair)}
.gpb__spec li:first-child{padding-left:0; border-left:0}
.gpb__spec b{display:flex; align-items:baseline; gap:5px;
  font:600 18px/1.1 var(--mono); color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.gpb__spec b em{font-style:normal; font:600 12px/1 var(--sans); color:rgba(255,255,255,.62)}
.gpb__spec span{display:block; margin-top:7px; font:600 9.5px/1 var(--sans);
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.38)}

.gpb__act{display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap}
.gpb__btn{
  display:inline-flex; align-items:center; padding:12px 20px; border-radius:7px;
  background:var(--cta); color:#fff; font:600 13.5px/1 var(--sans);
  transition:background .25s var(--e), transform .35s var(--e);
}
.gpb:hover .gpb__btn{background:#ff7846; transform:translateY(-1px)}
.gpb__mark{font:500 11px/1.5 var(--sans); color:rgba(255,255,255,.4)}

/* ------------------------------------------------------------- прибор ----- */
.gpb__dev{
  position:absolute; z-index:3; right:9%; bottom:7%; height:86%; width:auto;
  translate:calc(var(--px) * -10px) calc(var(--py) * -6px);
  will-change:transform;
}
.gpb.is-in .gpb__dev{animation:gpb-dev 1.4s var(--e) both .18s}
@keyframes gpb-dev{
  from{opacity:0; transform:translateY(34px) scale(.97)}
  to  {opacity:1; transform:none}
}
/* контактная тень — прибор стоит, а не наклеен */
.gpb__floor{
  position:absolute; z-index:2; right:9%; bottom:5.4%; width:15%; height:26px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 72%);
  filter:blur(1px);
}
.gpb.is-in .gpb__floor{animation:gpb-floor 1.4s var(--e) both .18s}
@keyframes gpb-floor{from{opacity:0; transform:scaleX(.7)} to{opacity:1; transform:none}}


/* ---------------------------------------------- подсветка объекта сзади ---- */
/* Тёмный корпус на тёмном фоне сливался — за прибором ставим мягкий источник
   света: широкое пятно + узкий «софтбокс» по силуэту, плюс свечение по контуру. */
.gpb__spot{
  position:absolute; z-index:1; pointer-events:none;
  left:calc(var(--devl,50%) + var(--spotdx,0px)); bottom:calc(var(--devb,52px) - 16px);
  width:var(--spotw,210px); height:var(--spoth,250px);
  translate:calc(-50% + var(--px) * -6px) calc(var(--py) * -4px);
  mix-blend-mode:screen;
  background:radial-gradient(50% 50% at 50% 44%,
     rgba(150,255,205,.9) 0%, rgba(96,215,160,.55) 30%, rgba(56,155,115,.2) 58%, rgba(40,120,90,0) 80%);
  filter:blur(12px);
}
.gpb__spot::after{            /* узкая световая колонна прямо за корпусом */
  content:""; position:absolute; left:50%; bottom:12%;
  width:var(--spotcw,74px); height:88%; transform:translateX(-50%);
  border-radius:50% 50% 42% 42% / 60% 60% 40% 40%;
  background:radial-gradient(54% 58% at 50% 42%,
     rgba(255,255,255,.92) 0%, rgba(198,255,224,.55) 32%, rgba(140,235,190,.18) 62%, rgba(140,235,190,0) 80%);
  filter:blur(11px);
}
.gpb.is-in .gpb__spot{animation:gpb-spot-in 1.6s var(--e) both .1s, gpb-spot 9s ease-in-out infinite 1.7s}
@keyframes gpb-spot-in{from{opacity:0} to{opacity:1}}
@keyframes gpb-spot{0%,100%{opacity:.85} 50%{opacity:1}}
/* ореол точно по силуэту: копия вырезки, перекрашенная в зелёный и размытая */
.gpb__devglow{
  position:absolute; z-index:2; right:9%; bottom:7%; height:86%; width:auto; pointer-events:none;
  transform-origin:50% 100%; mix-blend-mode:screen; opacity:.9;
  filter:brightness(0) invert(62%) sepia(62%) saturate(560%) hue-rotate(88deg) blur(15px);
}
.gpb--v .gpb__devglow{
  right:auto; left:var(--devl,50%); bottom:var(--devb,52px); height:var(--devh,196px);
  translate:calc(-50% + var(--px) * -6px) calc(var(--py) * -4px); scale:1.07;
}
.gpb.is-in .gpb__devglow{animation:gpb-glow-in 1.6s var(--e) both .12s, gpb-spot 9s ease-in-out infinite 1.7s}
@keyframes gpb-glow-in{from{opacity:0} to{opacity:.9}}

/* контровой свет по краю корпуса */
.gpb--glow .gpb__dev{
  filter:drop-shadow(0 0 3px rgba(190,255,220,.55))     /* тонкий контровой кант */
         drop-shadow(0 0 20px rgba(126,242,171,.42))    /* ореол вокруг силуэта  */
         drop-shadow(0 18px 26px rgba(0,0,0,.62));      /* объём и посадка       */
}
/* вокруг светового пятна фон гасим — контраст силуэта выше */
.gpb--glow .gpb__vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 38% at var(--devl,50%) calc(100% - var(--devb,52px) - 96px),
     rgba(3,7,15,0) 0%, rgba(3,7,15,.45) 58%, rgba(3,7,15,.78) 100%);
}

/* --------------------------------------------------- график концентрации -- */
.gpb__plot{position:absolute; z-index:2; left:0; bottom:0; height:56%; width:100%; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%)}
.gpb__plot .base{fill:none; stroke:rgba(255,255,255,.10); stroke-width:1}
.gpb__plot .line{
  fill:none; stroke:var(--acc); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  opacity:.75; stroke-dasharray:1200; stroke-dashoffset:1200;
}
.gpb.is-in .gpb__plot .line{animation:gpb-draw 1.8s var(--e) both .55s}
@keyframes gpb-draw{to{stroke-dashoffset:0}}
.gpb.is-in .gpb__plot .glide{animation:gpb-glide 34s linear infinite 2.2s}
@keyframes gpb-glide{from{transform:translateX(0)} to{transform:translateX(-560px)}}

/* --------------------------------------------------------------- луч ------ */
.gpb__ray{position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible}
.gpb__ray .beam{
  fill:none; stroke:url(#gpbRay); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900; opacity:0;
}
.gpb.is-in .gpb__ray .beam{animation:gpb-beam 1.5s var(--e) both .5s, gpb-beam-idle 7s ease-in-out infinite 2.4s}
@keyframes gpb-beam{from{opacity:0; stroke-dashoffset:900} to{opacity:.95; stroke-dashoffset:0}}
@keyframes gpb-beam-idle{0%,86%,100%{opacity:.95} 90%{opacity:.6} 94%{opacity:1}}
.gpb__ray .hit{fill:#dfffee; opacity:0}
.gpb.is-in .gpb__ray .hit{animation:gpb-hit 7s ease-out infinite 1.9s}
@keyframes gpb-hit{0%{opacity:.35} 4%{opacity:1} 30%{opacity:.7} 100%{opacity:.7}}
.gpb__ray .halo{fill:rgba(126,242,171,.32); opacity:0; transform-box:fill-box; transform-origin:center}
.gpb.is-in .gpb__ray .halo{animation:gpb-halo 7s ease-out infinite 1.9s}
@keyframes gpb-halo{0%{opacity:.6; transform:scale(.4)} 26%{opacity:0; transform:scale(2.6)} 100%{opacity:0; transform:scale(2.6)}}

/* ------------------------------------------------------------- ридаут ----- */
/* Цифры перекатываются посимвольно — приём из компонента Originkit
   «Rolling Letters» (slot-machine reveal), переписан без GSAP. */
.gpb__read{position:absolute; z-index:4; display:flex; flex-direction:column; gap:6px; pointer-events:none}
.gpb--field .gpb__read::before{
  content:""; position:absolute; left:-34px; right:-34px; top:-26px; bottom:-24px; z-index:-1;
  background:radial-gradient(62% 62% at 50% 50%, rgba(6,11,21,.80) 0%, rgba(6,11,21,.28) 52%, rgba(6,11,21,0) 76%);
  filter:blur(4px);
}
.gpb__num{display:flex; align-items:baseline;
  font:600 23px/1 var(--mono); color:#eafff2; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px rgba(4,10,20,.75);
}
.gpb__digits{display:inline-flex}
.gpb__num .roll{display:inline-block; overflow:hidden; height:1.1em; vertical-align:bottom}
.gpb__num .roll i{display:block; font-style:normal}
.gpb__num .roll i.out{animation:gpb-roll-out .55s var(--e) both}
.gpb__num .roll i.in {animation:gpb-roll-in  .55s var(--e) both}
@keyframes gpb-roll-out{from{transform:none; opacity:1} to{transform:translateY(-115%); opacity:0}}
@keyframes gpb-roll-in {from{transform:translateY(115%); opacity:0} to{transform:none; opacity:1}}
.gpb__num u{text-decoration:none; font:600 12px/1 var(--sans); color:rgba(255,255,255,.6); margin-left:7px}
.gpb__cap{font:700 10.5px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.8); text-shadow:0 1px 3px rgba(4,10,20,.9), 0 2px 16px rgba(4,10,20,.85)}

/* ============================================================== ТЁМНЫЙ ===== */
.gpb--dark{
  background:
    radial-gradient(90% 120% at 78% 108%, rgba(67,193,109,.16) 0%, rgba(67,193,109,0) 62%),
    linear-gradient(102deg,#141c30 0%,#101728 44%,#080d18 100%);
}
.gpb--dark .gpb__mesh{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(102deg,#000 0%,rgba(0,0,0,.30) 58%,transparent 88%);
  -webkit-mask-image:linear-gradient(102deg,#000 0%,rgba(0,0,0,.30) 58%,transparent 88%);
}
.gpb--dark .gpb__aura{
  position:absolute; inset:-25%;
  background:radial-gradient(24% 40% at var(--mx) var(--my), rgba(90,200,140,.20) 0%, rgba(90,200,140,0) 70%);
}
.gpb--dark.is-in .gpb__aura{animation:gpb-breathe 11s ease-in-out infinite}
.gpb--v.gpb--glow .gpb__aura{
  background:radial-gradient(30% 22% at var(--devl,50%) calc(100% - var(--devb,52px) - 110px),
     rgba(90,200,140,.16) 0%, rgba(90,200,140,0) 72%);
}
@keyframes gpb-breathe{0%,100%{opacity:.75} 50%{opacity:1}}
.gpb--dark .gpb__read{left:auto; right:26%; bottom:auto; top:22%; align-items:flex-end; text-align:right}
.gpb--dark .gpb__plot{left:33%; width:42%; height:40%; bottom:17%}
.gpb--dark .gpb__floor{right:8.4%; width:7.6%; height:22px}

/* ============================================================== ПОЛЕВОЙ ==== */
.gpb--field{background:#0a1120}
.gpb--field .gpb__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transform:scale(1.03); will-change:transform;
}
.gpb--field.is-in .gpb__photo{animation:gpb-photo 1.9s cubic-bezier(.32,.72,.3,1) both, gpb-drift 40s ease-in-out infinite alternate 2s}
@keyframes gpb-photo{from{opacity:0; transform:scale(1.10)} to{opacity:1; transform:scale(1.03)}}
@keyframes gpb-drift{from{transform:scale(1.03)} to{transform:scale(1.075) translateX(-1.2%)}}
.gpb--field .gpb__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg,rgba(6,11,21,.93) 0%,rgba(6,11,21,.80) 24%,rgba(6,11,21,.34) 50%,rgba(6,11,21,.02) 72%,rgba(6,11,21,.20) 100%),
    linear-gradient(0deg,rgba(6,11,21,.55) 0%,rgba(6,11,21,0) 42%),
    radial-gradient(26% 46% at var(--mx) var(--my), rgba(120,220,160,.14) 0%, rgba(120,220,160,0) 72%);
}
.gpb--field .gpb__read{right:6%; top:20%; align-items:flex-end; text-align:right}

/* =============================================================== СВЕТЛЫЙ ==== */
.gpb--light{
  background:linear-gradient(102deg,#fff 0%,#f8fafc 46%,#eef2f7 100%);
  border:1px solid #e4e9f0; color:var(--navy);
  --hair:rgba(27,35,54,.14);
}
.gpb--light .gpb__aura{
  position:absolute; inset:-25%;
  background:radial-gradient(22% 38% at var(--mx) var(--my), rgba(67,193,109,.13) 0%, rgba(67,193,109,0) 72%);
}
.gpb--light.is-in .gpb__aura{animation:gpb-breathe 11s ease-in-out infinite}
.gpb--light .gpb__eyebrow{color:#79839a}
.gpb--light .gpb__h{color:var(--navy)}
.gpb--light .gpb__h i{color:#1c8248}
.gpb--light .gpb__lead{color:#5b6478}
.gpb--light .gpb__spec b{color:var(--navy)}
.gpb--light .gpb__spec b em{color:#6b7488}
.gpb--light .gpb__spec span{color:#98a0b0}
.gpb--light .gpb__mark{color:#8b93a5}
.gpb--light .gpb__floor{background:radial-gradient(50% 50% at 50% 50%, rgba(27,35,54,.26) 0%, rgba(27,35,54,0) 72%)}
.gpb--light .gpb__plot{left:31%; width:41%; height:38%; bottom:16%}
.gpb--light .gpb__floor{right:8.4%; width:16.5%; height:24px}
.gpb--light .gpb__plot .base{stroke:rgba(27,35,54,.10)}
.gpb--light .gpb__plot .line{stroke:#2aa35c; opacity:.85}
.gpb--light .gpb__read{left:auto; right:33%; bottom:auto; top:20%; align-items:flex-end; text-align:right}
.gpb--light .gpb__num{color:#17603a; text-shadow:none}
.gpb--light .gpb__num u{color:#8b93a5}
.gpb--light .gpb__cap{color:#98a0b0; text-shadow:none}

/* замер уводим вниз кадра, где фон темнее */
.gpb--read-low .gpb__read{top:auto; bottom:14%; right:6%; align-items:flex-end; text-align:right}
.gpb--v.gpb--read-low .gpb__read{top:auto; bottom:22px; left:20px; right:auto; align-items:flex-start; text-align:left}

/* ========================================================== ВЕРТИКАЛЬНЫЙ ==== */
.gpb--v{height:520px; min-height:0; margin:0 0 14px}
.gpb--v .gpb__body{max-width:100%; min-height:0; padding:22px 20px 0; justify-content:flex-start}
.gpb--v .gpb__eyebrow{margin-bottom:11px; font-size:9.5px; letter-spacing:.14em}
.gpb--v .gpb__h{font-size:22px; line-height:1.14}
.gpb--v .gpb__lead{font-size:12.5px; margin-top:9px}
.gpb--v .gpb__spec{display:flex; width:100%; margin-top:14px}
.gpb--v .gpb__spec li{flex:1 1 0; min-width:0; padding:0 9px}
.gpb--v .gpb__spec b{font-size:16px; gap:4px}
.gpb--v .gpb__spec b em{font-size:11px}
.gpb--v .gpb__spec span{margin-top:5px; font-size:8px; letter-spacing:.1em}
.gpb--v .gpb__act{margin-top:16px}
.gpb--v .gpb__btn{width:100%; justify-content:center; padding:11px 14px}
.gpb--v .gpb__dev{right:auto; left:var(--devl,50%); bottom:var(--devb,52px); height:var(--devh,196px);
  translate:calc(-50% + var(--px) * -6px) calc(var(--py) * -4px)}
.gpb--v .gpb__floor{right:auto; left:var(--devl,50%); bottom:calc(var(--devb,52px) - 6px);
  width:var(--floorwv,34%); margin-left:calc(var(--floorwv,34%) / -2)}
.gpb--v .gpb__plot{left:0; right:0; width:100%; height:120px; bottom:6px}
.gpb--v.gpb--dark .gpb__read,.gpb--v.gpb--light .gpb__read{right:auto; left:20px; bottom:auto;
  top:var(--readt,236px); align-items:flex-start; text-align:left}
.gpb--v.gpb--field .gpb__photo{object-position:52% var(--phy,14%)}
.gpb--v.gpb--field .gpb__veil{
  background:
    linear-gradient(180deg,rgba(6,11,21,.95) 0%,rgba(6,11,21,.86) 28%,rgba(6,11,21,.24) 56%,rgba(6,11,21,.72) 100%),
    radial-gradient(40% 22% at var(--mx) var(--my), rgba(120,220,160,.16) 0%, rgba(120,220,160,0) 72%);
}
.gpb--v.gpb--field .gpb__read{right:auto; left:20px; bottom:26px; top:auto; align-items:flex-start; text-align:left}
.gpb--v.gpb--dark .gpb__mesh{background-size:52px 52px}


/* кадр справа, растворяется в фоне (для светлого варианта) */
.gpb__side{
  position:absolute; z-index:2; right:0; top:0; bottom:0; width:46%; height:100%;
  object-fit:cover; object-position:58% 46%;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 26%,#000 52%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 26%,#000 52%);
  translate:calc(var(--px) * -7px) 0; scale:1.02;
}
.gpb.is-in .gpb__side{animation:gpb-side 1.6s cubic-bezier(.32,.72,.3,1) both .1s}
@keyframes gpb-side{from{opacity:0; transform:scale(1.05)} to{opacity:1; transform:none}}
.gpb--sidephoto .gpb__read{left:33%; top:auto; bottom:16%; align-items:flex-start; text-align:left}
.gpb--sidephoto .gpb__num{color:#17603a}
/* ширину контактной тени можно задать в разметке через --floorw */
.gpb__floor{width:var(--floorw,15%)}

.gpb--v.gpb--photo-low .gpb__photo{top:auto; bottom:0; height:var(--phh,320px); object-position:50% var(--phy,18%)}
.gpb--v.gpb--photo-low .gpb__veil{
  background:
    linear-gradient(180deg,rgba(6,11,21,.96) 0%,rgba(6,11,21,.92) 38%,rgba(6,11,21,.34) 62%,rgba(6,11,21,.60) 100%),
    radial-gradient(40% 22% at var(--mx) var(--my), rgba(120,220,160,.16) 0%, rgba(120,220,160,0) 72%);
}
.gpb--v.gpb--photo-low .gpb__body{padding-top:34px}
.gpb--v.gpb--photo-low .gpb__act{margin-top:26px}

/* ================================================================ адаптив === */
@media (max-width:1180px){
  .gpb:not(.gpb--v){min-height:250px}
  .gpb:not(.gpb--v) .gpb__lead{display:none}
  .gpb:not(.gpb--v) .gpb__body{max-width:62%; padding-left:26px}
  .gpb:not(.gpb--v).gpb--dark .gpb__plot,.gpb:not(.gpb--v).gpb--light .gpb__plot,
  .gpb:not(.gpb--v).gpb--dark .gpb__read,.gpb:not(.gpb--v).gpb--light .gpb__read,
  .gpb:not(.gpb--v).gpb--sidephoto .gpb__read{display:none}
}
@media (max-width:860px){
  .gpb:not(.gpb--v){min-height:0}
  .gpb:not(.gpb--v) .gpb__body{max-width:100%; min-height:0; padding:20px 18px 208px}
  .gpb:not(.gpb--v) .gpb__lead{display:block; font-size:13px}
  .gpb:not(.gpb--v) .gpb__btn{flex:1 1 auto; justify-content:center}
  .gpb .gpb__dev{right:auto!important; left:50%; bottom:16px; height:166px!important;
    translate:-50% 0!important}
  .gpb .gpb__floor{right:auto; left:50%; bottom:14px; width:104px; margin-left:-52px}
  .gpb .gpb__devglow{right:auto; left:50%; bottom:16px; height:166px;
    translate:-50% 0; scale:1.07}
  .gpb .gpb__spot{left:50%; bottom:2px; width:200px; height:210px; translate:-50% 0}
  .gpb .gpb__plot{display:none}
  .gpb .gpb__read{display:flex!important; right:auto!important; left:18px!important; top:auto!important;
    bottom:16px!important; align-items:flex-start!important; text-align:left!important}
  .gpb--field .gpb__ray{display:none}
  /* на мобильном текст лежит поверх кадра во всю ширину — вуаль вертикальная */
  .gpb:not(.gpb--v).gpb--field .gpb__veil{
    background:
      linear-gradient(180deg,rgba(6,11,21,.95) 0%,rgba(6,11,21,.90) 34%,rgba(6,11,21,.55) 58%,rgba(6,11,21,.66) 100%),
      radial-gradient(40% 24% at var(--mx) var(--my), rgba(120,220,160,.14) 0%, rgba(120,220,160,0) 72%);
  }
  .gpb--v{height:auto}
  .gpb--v .gpb__body{min-height:0}
  .gpb--v .gpb__body{padding-bottom:200px}
}

/* --------------------------------------------------- меньше движения ------- */
@media (prefers-reduced-motion:reduce){
  .gpb [data-in],.gpb__h .ln > span{opacity:1!important; transform:none!important; animation:none!important}
  .gpb__eyebrow::before{transform:none!important; animation:none!important}
  .gpb__dev,.gpb__floor,.gpb__photo,.gpb__side,.gpb__spot,.gpb__devglow,.gpb__aura,.gpb__plot .line,.gpb__plot .glide,
  .gpb__ray .beam,.gpb__ray .hit,.gpb__ray .halo{animation:none!important; opacity:1!important}
  .gpb__plot .line,.gpb__ray .beam{stroke-dashoffset:0!important}
}

/* ------------------------------------------------ статичный кадр (?static) -- */
.gpb.is-static [data-in],.gpb.is-static .gpb__h .ln > span{opacity:1!important; transform:none!important; animation:none!important}
.gpb.is-static .gpb__eyebrow::before{transform:none!important; animation:none!important}
.gpb.is-static .gpb__dev,.gpb.is-static .gpb__floor,.gpb.is-static .gpb__photo,.gpb.is-static .gpb__side,
.gpb.is-static .gpb__spot,.gpb.is-static .gpb__devglow,
.gpb.is-static .gpb__aura,.gpb.is-static .gpb__plot .glide{animation:none!important; opacity:1!important}
.gpb.is-static .gpb__plot .line,.gpb.is-static .gpb__ray .beam{animation:none!important; opacity:.9; stroke-dashoffset:0!important}
.gpb.is-static .gpb__ray .hit{animation:none!important; opacity:1}
.gpb.is-static .gpb__ray .halo{animation:none!important; opacity:.22}