/* evo-stage (evo-crit-4): продуктовые первые экраны. Светлая материя, Geologica, радуга ДНК только как энергия. */
@property --g { syntax: "<length>"; inherits: true; initial-value: 18px; }
/* старые шаблонные hero и бегущие строки — скрыты */
.page-id-10109 .elementor-element-c353317, .page-id-10109 .elementor-element-6c530b1,
.page-id-10107 .elementor-element-5011c8d, .page-id-10107 .elementor-element-4e28ecb,
.page-id-10108 .elementor-element-14cad85, .page-id-10108 .elementor-element-124a3d8,
.page-id-10113 .elementor-element-52d9fa0, .page-id-10113 .elementor-element-45ecefb,
.page-id-10114 .elementor-element-3fa28e3, .page-id-10114 .elementor-element-f53757a { display: none !important; }
.page-id-10109 .elementor-element-711a575 { background: #F8F7F4 !important; padding-top: 24px !important; min-height: 0 !important; }
.page-id-10109 .elementor-element-711a575 > .elementor-background-overlay, .page-id-10109 .elementor-element-711a575 > .elementor-background-video-container { display: none !important; }
.es-anchor { display: block; position: relative; top: -96px; height: 0; }

.es { --x: max(60px, calc(50vw - 660px)); --ink: #151515; --mute: #5c5c5c; --bg: #F8F7F4; --ease: cubic-bezier(.22,1,.36,1);
  --dna: linear-gradient(90deg, #8A3CFF, #2F6BFF 25%, #1FC96B 50%, #FFC21A 75%, #FF3B3B);
  --h1: clamp(64px, 7.6vw, 112px);
  position: relative; overflow: hidden; background: var(--bg); color: var(--ink); font-family: Geologica, system-ui, sans-serif;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 36px var(--x) 56px; min-height: calc(100svh - 92px); box-sizing: border-box; }
.es *, .es *::before, .es *::after { box-sizing: border-box; }
.es-eye { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 600 15px/1.2 Geologica, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.es-eye::before { content: ""; width: 28px; height: 4px; border-radius: 4px; background: var(--dna); flex: none; }
.es .es-h1 { margin: 0; font: 700 var(--h1)/.96 Geologica, sans-serif !important; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.es .es-lead { margin: 0; font: 400 19px/1.5 Geologica, sans-serif; color: #2b2b2b; max-width: 34em; }
.es-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.es-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 58px; padding: 0 30px; border-radius: 999px; overflow: hidden;
  background: var(--ink); color: #fff !important; font: 600 18px/1 Geologica, sans-serif; text-decoration: none !important; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.es-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dna); opacity: 0; transition: opacity .4s var(--ease); }
.es-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(138,60,255,.55); }
.es-btn:hover::after { opacity: 1; }
.es-link { font: 600 18px/1 Geologica, sans-serif; color: var(--ink) !important; text-decoration: none !important; padding-bottom: 6px;
  background: var(--dna) 0 100% / 100% 2px no-repeat; transition: background-size .4s var(--ease); }
.es-link:hover { background-size: 40% 2px; }
.es-btn:focus-visible, .es-link:focus-visible, .es button:focus-visible { outline: 3px solid #2F6BFF; outline-offset: 3px; }
.es-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.es-tags li { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(21,21,21,.1); font: 500 15px/1 Geologica, sans-serif; margin: 0; }
.es-tags li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.es-hint { margin: 0; font: 500 15px/1.3 Geologica, sans-serif; color: var(--mute); }
.es-txt, .es-side, .es-vis { position: relative; z-index: 2; }
/* появление — один раз, без цепочки fade-up */
@media (prefers-reduced-motion: no-preference) {
  .es .es-h1 { animation: es-in 1.1s var(--ease) both; }
  .es-vis { animation: es-vis 1.4s var(--ease) .15s both; }
  @keyframes es-in { from { opacity: 0; transform: translateY(28px); } }
  @keyframes es-vis { from { opacity: 0; transform: scale(.96); } }
}

/* ── Аэрохоккей: стол в ракурсе ¾ по диагонали, шайба живая ── */
.es--hk .es-txt { grid-column: 1 / 10; grid-row: 1; }
.es--hk .es-side { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: 34px; }
.es--hk .es-vis { grid-column: 5 / 13; grid-row: 1 / 3; align-self: end; margin: 0 calc(var(--x) * -1) 0 0; padding-top: 150px; }
.es-hk { perspective: 1500px; perspective-origin: 50% 0%; }
.es-hk-table { position: relative; width: 104%; aspect-ratio: 1000 / 560; margin-left: 2%; transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-17deg); border-radius: 44px; }
.es-hk-slab { position: absolute; inset: 0; border-radius: 44px; background: linear-gradient(180deg, #e3e7ee, #c9cfd9); transform: translateZ(-34px);
  box-shadow: 0 60px 70px -30px rgba(40,50,80,.35); }
.es-hk-c { position: relative; display: block; width: 100%; height: 100%; border-radius: 44px; touch-action: pan-y; cursor: none;
  box-shadow: inset 0 0 0 1px rgba(21,21,21,.06), 0 1px 0 #fff; }
.es-hk-score { position: absolute; z-index: 3; right: calc(var(--x) + 10px); top: 40px; display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 999px; background: #fff;
  box-shadow: 0 20px 40px -24px rgba(21,21,21,.35); font: 700 34px/1 Geologica, sans-serif; font-variant-numeric: tabular-nums; }
.es-hk-score i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.es-hk-a { color: #8A3CFF; } .es-hk-b { color: #FF3B3B; }
.es-hk-score.goal { animation: es-pop .6s var(--ease); }
@keyframes es-pop { 40% { transform: scale(1.14); } }
.es--hk .es-hint { position: absolute; right: calc(var(--x) + 10px); bottom: 0; }

/* ── Песочница: панорама живого рельефа ── */
.es--sd .es-txt { grid-column: 1 / 9; align-self: end; }
.es--sd .es-side { grid-column: 9 / 13; align-self: end; padding-bottom: 6px; }
.es--sd .es-side .es-lead { font-size: 18px; }
.es--sd .es-vis { grid-column: 1 / 13; margin: 40px calc(var(--x) * -1) 0; padding: 0 var(--x); perspective: 1400px; }
.es-sd-table { position: relative; border-radius: 34px; padding: 16px; background: linear-gradient(180deg, #fff, #ECE6DA); transform: rotateX(22deg); transform-origin: 50% 100%;
  box-shadow: 0 50px 60px -40px rgba(60,45,20,.45), inset 0 -6px 0 rgba(120,95,50,.12); }
.es-sd-c { display: block; width: 100%; height: clamp(300px, 34vw, 470px); border-radius: 22px; touch-action: pan-y; cursor: crosshair; background: #F3DFA8; }
.es-sd-ui { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.es-sd-mode { display: inline-flex; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(21,21,21,.1); }
.es-sd-mode button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: none; font: 600 16px/1 Geologica, sans-serif; color: var(--ink); cursor: pointer; transition: background .3s var(--ease), color .3s; }
.es-sd-mode button.on { background: var(--ink); color: #fff; }
.es-sd-legend { display: flex; align-items: center; gap: 0; font: 500 14px/1 Geologica, sans-serif; color: var(--mute); }
.es-sd-legend span { padding: 30px 14px 0; background: linear-gradient(90deg, var(--a), var(--b)) 0 0 / 100% 12px no-repeat; }
.es-sd-legend span:nth-child(1) { --a: #1F4FD8; --b: #5FC3FF; border-radius: 6px 0 0 6px; } .es-sd-legend span:nth-child(2) { --a: #5FC3FF; --b: #F3DFA8; }
.es-sd-legend span:nth-child(3) { --a: #9BDB6A; --b: #138A4A; } .es-sd-legend span:nth-child(4) { --a: #138A4A; --b: #A86B3C; } .es-sd-legend span:nth-child(5) { --a: #A86B3C; --b: #fff; }
.es-proof { position: absolute; z-index: 3; right: calc(var(--x) + 26px); top: -26px; width: clamp(180px, 17vw, 250px); margin: 0; padding: 8px 8px 10px; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 40px -24px rgba(21,21,21,.4); transform: rotate(3deg); }
.es-proof img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.es-proof figcaption { margin-top: 8px; font: 500 13px/1.3 Geologica, sans-serif; color: var(--mute); text-align: center; }

/* ── Технологии: светлый exploded-view ── */
.es--tx .es-txt { grid-column: 1 / 7; align-self: center; z-index: 3; }
.es--tx .es-h1 { font-size: clamp(56px, 6.3vw, 96px) !important; }
.es--tx .es-vis { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 210px; align-items: center; gap: 10px; min-height: 640px; }
.es-tx-scene { height: 640px; perspective: 2200px; display: grid; place-items: center; }
.es-tx-stack { --g: 18px; position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: translateY(150px) rotateX(58deg) rotateZ(-42deg); transition: --g 1s; }
.es-tx-stack.open { --g: 96px; }
.es-ly { position: absolute; inset: 0; border-radius: 26px; transform-style: preserve-3d; transition: transform 1.2s var(--ease), box-shadow .4s, opacity .4s;
  background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(21,21,21,.08), 0 30px 40px -24px rgba(40,50,90,.35); }
.es-ly--0 { transform: translateZ(0); overflow: hidden; background: #2F6BFF; }
.es-ly--0 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-ly--1 { transform: translateZ(calc(var(--g) * 1)); }
.es-ly--2 { transform: translateZ(calc(var(--g) * 2)); background: rgba(255,255,255,.55) radial-gradient(circle, rgba(47,107,255,.45) 1.6px, transparent 2px) 0 0 / 22px 22px; overflow: hidden; }
.es-ly--3 { transform: translateZ(calc(var(--g) * 3)); background: rgba(255,255,255,.4); }
.es-ly.hi { box-shadow: inset 0 0 0 2px var(--hc, #2F6BFF), 0 40px 60px -24px rgba(40,50,90,.45); }
.es-ly--1.hi { transform: translateZ(calc(var(--g) * 1 + 24px)); } .es-ly--2.hi { transform: translateZ(calc(var(--g) * 2 + 24px)); }
.es-ly--3.hi { transform: translateZ(calc(var(--g) * 3 + 24px)); } .es-ly--0.hi { transform: translateZ(-18px); }
.es-chip { position: absolute; inset: 70px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(21,21,21,.1), 0 0 0 26px rgba(31,201,107,.08);
  display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; padding: 26px; gap: 10px; }
.es-chip b { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); animation: es-blink 2.4s ease-in-out infinite; }
.es-chip b:nth-child(1) { --c: #8A3CFF; } .es-chip b:nth-child(2) { --c: #2F6BFF; animation-delay: .3s; } .es-chip b:nth-child(3) { --c: #18B8A8; animation-delay: .6s; }
.es-chip b:nth-child(4) { --c: #1FC96B; animation-delay: .9s; } .es-chip b:nth-child(5) { --c: #FFC21A; animation-delay: 1.2s; } .es-chip b:nth-child(6) { --c: #FF7A1A; animation-delay: 1.5s; } .es-chip b:nth-child(7) { --c: #FF3B3B; animation-delay: 1.8s; }
@keyframes es-blink { 50% { opacity: .35; transform: scale(.8); } }
.es-scan { position: absolute; left: 0; right: 0; height: 60px; top: -60px; background: linear-gradient(180deg, transparent, rgba(47,107,255,.35), transparent); animation: es-scan 2.8s linear infinite; }
@keyframes es-scan { to { top: 100%; } }
.es-proj { position: absolute; left: 50%; top: 50%; width: 120px; height: 84px; margin: -42px 0 0 -60px; border-radius: 20px; background: linear-gradient(180deg, #fff, #e8ebf1);
  box-shadow: 0 0 0 1px rgba(21,21,21,.1), 0 18px 24px -14px rgba(21,21,21,.4); transform: translateZ(16px); }
.es-proj b { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #0D0F1A 34% 60%, transparent 62%), conic-gradient(#8A3CFF, #2F6BFF, #1FC96B, #FFC21A, #FF3B3B, #8A3CFF); }
.es-beam { position: absolute; left: 50%; top: 50%; width: 260px; height: calc(var(--g) * 3); margin-left: -130px; transform-origin: 50% 0; transform: rotateX(-90deg);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(138,60,255,.12) 40%, rgba(47,107,255,.16)); pointer-events: none; transition: height 1.2s var(--ease); }
.es-beam--y { transform: rotateZ(90deg) rotateX(-90deg); }
.es-beam { top: 50%; transform: translateZ(calc(var(--g) * 3)) rotateX(-90deg); }
.es-beam--y { transform: translateZ(calc(var(--g) * 3)) rotateZ(90deg) rotateX(-90deg); }
.es-tx-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; }
.es-tx-legend li { position: relative; margin: 0; padding-left: 20px; cursor: default; transition: transform .4s var(--ease); }
.es-tx-legend li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); }
.es-tx-legend b { display: block; font: 600 13px/1 Geologica, sans-serif; color: var(--mute); letter-spacing: .08em; }
.es-tx-legend span { display: block; margin-top: 6px; font: 650 22px/1.1 Geologica, sans-serif; }
.es-tx-legend small { display: block; margin-top: 6px; font: 400 15px/1.4 Geologica, sans-serif; color: var(--mute); }
.es-tx-legend li.hi { transform: translateX(6px); }

/* ── Франшиза: результат — живой парк + маршрут запуска ── */
.es--fr .es-txt { grid-column: 1 / 7; align-self: center; }
.es--fr .es-h1 { font-size: clamp(56px, 6.4vw, 100px) !important; }
.es--fr .es-vis { grid-column: 7 / 13; height: min(62vh, 600px); min-height: 440px; margin-right: calc(var(--x) * -1); }
.es-fr-a, .es-fr-b { position: absolute; margin: 0; overflow: hidden; transition: transform .8s var(--ease); }
.es-fr-a { inset: 0 0 0 0; border-radius: 40px 0 0 40px; }
.es-fr-b { left: -60px; bottom: -36px; width: 46%; aspect-ratio: 3 / 2; border-radius: 26px; border: 8px solid var(--bg); box-shadow: 0 30px 50px -30px rgba(21,21,21,.5); }
.es-fr-a img, .es-fr-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-route { grid-column: 1 / 13; position: relative; margin-top: 72px; }
.es-route-svg { position: absolute; left: 0; top: -38px; width: 100%; height: 120px; overflow: visible; }
.es-route-p { stroke-dasharray: 6 12; animation: es-dash 3s linear infinite; }
@keyframes es-dash { to { stroke-dashoffset: -36; } }
.es-route-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.es-route-steps li { margin: 0; padding: 46px 0 0; font: 600 19px/1.25 Geologica, sans-serif; position: relative; }
.es-route-steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--c), 0 6px 14px -6px var(--c); }
.es-route-steps b { display: block; margin-bottom: 6px; font: 600 13px/1 Geologica, sans-serif; color: var(--mute); letter-spacing: .08em; }
.es-route-dot { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; pointer-events: none; }

/* ── Услуги: линия процесса раскрывающимися кадрами ── */
.es--us .es-txt { grid-column: 1 / 9; align-self: end; }
.es--us .es-side { grid-column: 9 / 13; align-self: end; }
.es--us .es-side .es-lead { font-size: 18px; }
.es-us { grid-column: 1 / 13; display: flex; gap: 10px; height: clamp(360px, 44vh, 470px); margin: 44px 0 0; padding: 0; list-style: none; }
.es-us li { position: relative; flex: 1 1 0; min-width: 0; margin: 0; border-radius: 28px; overflow: hidden; background: #e9e7e1; transition: flex-grow .9s var(--ease); cursor: pointer; }
.es-us li.on { flex-grow: 5.2; cursor: default; }
.es-us img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear, filter .6s; filter: saturate(.75) brightness(1.08); }
.es-us li.on img { transform: scale(1.06); filter: none; }
.es-us li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,247,244,.92), rgba(248,247,244,.55) 40%, rgba(248,247,244,0) 70%); transition: opacity .6s; }
.es-us li.on::after { opacity: 0; }
.es-us button { position: absolute; z-index: 2; left: 0; top: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.es-us button b { font: 600 13px/1 Geologica, sans-serif; letter-spacing: .08em; color: var(--mute); }
.es-us button span { font: 650 22px/1.1 Geologica, sans-serif; white-space: nowrap; }
.es-us li.on button { left: 20px; top: 20px; right: auto; padding: 14px 20px; border-radius: 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); flex-direction: row; align-items: center; gap: 14px; }
.es-us li:not(.on) button span { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 12px; }
.es-us p { position: absolute; z-index: 2; left: 20px; bottom: 20px; max-width: calc(100% - 40px); margin: 0; padding: 14px 20px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  font: 500 18px/1.35 Geologica, sans-serif; opacity: 0; transform: translateY(14px); transition: opacity .5s .3s, transform .6s .3s var(--ease); }
.es-us li.on p { opacity: 1; transform: none; }
.es-us li::before { content: ""; position: absolute; z-index: 3; left: 0; bottom: 0; height: 5px; width: 0; background: var(--c); }
.es-us li.on::before { animation: es-prog var(--t, 4.2s) linear forwards; }
.es-us.paused li.on::before { animation-play-state: paused; }
@keyframes es-prog { to { width: 100%; } }

/* ── планшет ── */
@media (max-width: 1100px) {
  .es { --x: 32px; --h1: clamp(52px, 8vw, 80px); column-gap: 16px; min-height: 0; padding-top: 28px; }
  .es--hk .es-txt, .es--sd .es-txt, .es--us .es-txt, .es--tx .es-txt, .es--fr .es-txt { grid-column: 1 / 13; grid-row: auto; }
  .es--hk .es-side, .es--sd .es-side, .es--us .es-side { grid-column: 1 / 13; grid-row: auto; margin-top: 22px; }
  .es--hk .es-vis { grid-column: 1 / 13; grid-row: auto; padding-top: 90px; margin: 0 -32px 0 0; }
  .es--tx .es-vis { grid-column: 1 / 13; grid-template-columns: 1fr 230px; min-height: 0; }
  .es--fr .es-vis { grid-column: 1 / 13; margin: 40px -32px 0 0; height: 420px; min-height: 0; }
  .es--fr .es-txt { margin-top: 0; }
  .es-fr-b { left: 24px; bottom: -40px; }
  .es-route { margin-top: 90px; }
  .es-route-steps li { font-size: 17px; }
  .es--tx .es-h1, .es--fr .es-h1 { font-size: var(--h1) !important; }
}
/* ── телефон ── */
@media (max-width: 767px) {
  .es { --x: 20px; --h1: min(44px, 11vw); column-gap: 0; padding: 22px 20px 44px; }
  .es-eye { font-size: 13px; margin-bottom: 14px; }
  .es .es-lead, .es--sd .es-side .es-lead, .es--us .es-side .es-lead { font-size: 17px; }
  .es-row { margin-top: 22px; }
  .es-btn { min-height: 54px; padding: 0 26px; font-size: 17px; }
  .es-tags { display: none; }
  .es--hk .es-txt { order: 1; } .es--hk .es-vis { order: 2; padding-top: 70px; margin: 0 -20px; } .es--hk .es-side { order: 3; }
  .es-hk { perspective: none; }
  .es-hk-table { transform: none; border-radius: 26px; }
  .es-hk-slab { border-radius: 26px; transform: translateY(10px); }
  .es-hk-c { border-radius: 26px; touch-action: none; }
  .es-hk-score { top: 10px; right: 20px; font-size: 26px; padding: 9px 18px; }
  .es--hk .es-hint { position: static; text-align: center; margin-top: 6px; }
  .es--sd .es-txt { order: 1; } .es--sd .es-vis { order: 2; margin: 26px -20px 0; padding: 0 12px; } .es--sd .es-side { order: 3; }
  .es-sd-table { padding: 10px; border-radius: 24px; transform: rotateX(16deg); }
  .es-sd-c { height: 300px; border-radius: 16px; }
  .es-sd-ui { justify-content: center; margin-top: 16px; }
  .es-sd-mode button { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .es-sd-legend { display: none; }
  .es-proof { width: 132px; right: 18px; top: -40px; padding: 5px 5px 6px; border-radius: 14px; }
  .es-proof figcaption { display: none; }
  .es--tx .es-vis { grid-template-columns: 1fr; margin-top: 10px; }
  .es-tx-scene { height: 380px; }
  .es-tx-stack { width: 200px; height: 200px; transform: translateY(90px) rotateX(58deg) rotateZ(-42deg); }
  .es-tx-stack.open { --g: 62px; }
  .es-chip { inset: 44px; padding: 14px; gap: 6px; } .es-chip b { width: 12px; height: 12px; }
  .es-proj { width: 80px; height: 56px; margin: -28px 0 0 -40px; } .es-proj b { width: 32px; height: 32px; margin: -16px; }
  .es-beam { width: 170px; margin-left: -85px; }
  .es-tx-legend { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .es-tx-legend span { font-size: 19px; }
  .es--tx .es-txt { order: 1; } .es--tx .es-vis { order: 2; }
  .es--fr .es-vis { height: 300px; margin: 30px -20px 0 0; }
  .es-fr-a { border-radius: 28px 0 0 28px; }
  .es-fr-b { width: 52%; left: -4px; bottom: -34px; border-width: 6px; border-radius: 18px; }
  .es-route { margin-top: 64px; }
  .es-route-svg { display: none; }
  .es-route-steps { grid-template-columns: 1fr; gap: 0; border-left: 3px solid transparent; border-image: linear-gradient(#8A3CFF, #2F6BFF, #1FC96B, #FFC21A, #FF3B3B) 1; margin-left: 9px; }
  .es-route-steps li { padding: 0 0 20px 26px; font-size: 18px; }
  .es-route-steps li::before { left: -13px; top: 0; }
  .es-us { flex-direction: column; height: auto; gap: 8px; margin-top: 30px; }
  .es-us li { flex: none; height: 64px; transition: height .8s var(--ease); }
  .es-us li.on { height: 330px; }
  .es-us li:not(.on) button { flex-direction: row; align-items: center; gap: 14px; padding: 0 20px; height: 64px; }
  .es-us li:not(.on) button span { writing-mode: initial; transform: none; margin: 0; font-size: 19px; }
  .es-us li.on button { left: 12px; top: 12px; padding: 10px 16px; }
  .es-us p { left: 12px; bottom: 12px; max-width: calc(100% - 24px); font-size: 16px; padding: 12px 16px; }
  .es--us .es-txt { order: 1; } .es--us .es-side { order: 2; } .es-us { order: 3; }
  .es-us li.on::before { animation: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .es-route-p, .es-scan, .es-chip b { animation: none; }
  .es-us li.on::before { animation: none; width: 100%; }
}

/* правки после превью */
.es .es-us { margin: 40px 0 0 !important; padding: 0 !important; }
.es .es-tags { margin: 26px 0 0 !important; padding: 0 !important; }
.es .es-route-steps, .es .es-tx-legend { padding: 0 !important; }
.es--us .es-txt { grid-column: 1 / 10; }
.es--us .es-side { grid-column: 10 / 13; }
.es--us .es-h1 { font-size: clamp(56px, 6.5vw, 98px) !important; }
.es--hk .es-hk-table { width: 88%; margin-left: 0; }
.es--hk .es-vis { padding-top: 120px; }
.es--fr .es-txt { padding-right: 56px; }
.es--fr .es-eye { white-space: nowrap; }
.es-fr-b { left: -28px; }
.es-route-dot { left: 0; top: 0; }
@media (max-width: 1100px) {
  .es--us .es-txt, .es--us .es-side { grid-column: 1 / 13; }
  .es--fr .es-txt { padding-right: 0; }
  .es--fr .es-eye { white-space: normal; }
  .es--hk .es-hk-table { width: 96%; }
}
@media (max-width: 767px) {
  .es .es-us { margin-top: 28px !important; }
  .es--hk .es-hk-table { width: 108%; margin-left: -4%; }
  .es-fr-b { left: -4px; }
}
.es-us li:not(.on) p { transition: opacity .12s, transform .12s; }
.es-txt .es-lead { margin-top: 26px; }
@media (max-width: 767px) {
  .es-eye-x { display: none; }
  .es-txt .es-lead { margin-top: 18px; }
  .es--hk .es-hk-table { width: 94%; margin-left: 3%; }
  .es--hk .es-hint { margin-top: 26px; }
  .es-proof { top: 14px; right: 26px; }
}
@media (min-width: 1101px) { .es--sd .es-vis { margin-top: 30px; } .es-sd-c { height: clamp(280px, 27vw, 400px); } }
@media (min-width: 1101px) {
  .es--tx .es-h1, .es--fr .es-h1, .es--us .es-h1 { font-size: clamp(56px, 6.75vw, 104px) !important; }
  .es-tx-stack { transform: translate(56px, 150px) rotateX(58deg) rotateZ(-42deg); }
}
@media (min-width: 1101px) {
  .es-tx-stack { width: 264px; height: 264px; transform: translate(14px, 140px) rotateX(58deg) rotateZ(-42deg); }
  .es-chip { inset: 60px; padding: 20px; }
  .es-tx-legend { position: relative; z-index: 2; }
}
/* п.29 (05.10): подпись под столом — в потоке, не уезжает за правый край и не ложится на стол */
.es--hk .es-hint { position: relative; z-index: 3; right: auto; bottom: auto; display: block; width: fit-content; max-width: 100%; margin: 56px 0 0 auto; margin-right: calc(var(--x) + 10px); padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 10px 24px -18px rgba(21,21,21,.4); white-space: normal; text-align: center; }
@media (max-width: 1100px) { .es--hk .es-hint { margin-top: 96px; } }
@media (max-width: 767px) { .es--hk .es-hint { margin: 22px auto 0; } }

/* 05.10 aero-2000: настоящее видео игры вместо нарисованного стола */
.es--hk .es-vis.es-hkv { padding-top: 0; margin: 0; align-self: center; }
.es-hkv-f { margin: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #dfe3ea; box-shadow: 0 40px 70px -34px rgba(21,21,21,.4); }
.es-hkv-v { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .es--hk .es-vis.es-hkv { padding: 0 20px; margin: 0; } .es-hkv-f { border-radius: 20px; } }

/* 05.10 22:30 QA-2150: шапка аэрохоккея — H1 своей строкой на всю ширину, видео ниже рядом с текстом, без наезда */
.es.es--hk { align-content: start; }
.es--hk .es-txt { grid-column: 1 / 13; grid-row: 1; position: relative; z-index: 3; }
.es--hk .es-side { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-top: 34px; }
.es--hk .es-vis.es-hkv { grid-column: 6 / 13; grid-row: 2; align-self: start; margin: 34px 0 0; padding: 0; }
@media (max-width: 1100px) {
  .es--hk .es-txt, .es--hk .es-side, .es--hk .es-vis.es-hkv { grid-column: 1 / 13; grid-row: auto; }
  .es--hk .es-vis.es-hkv { margin: 28px 0 0; padding: 0; }
}
@media (max-width: 767px) {
  .es--hk .es-vis.es-hkv { margin: 26px 0 0; padding: 0; }
  .es--hk .es-side { margin-top: 26px; }
}
/* вкладки: одна полоса активной вкладки (фиолетовая у ссылки), без второй оранжевой у пункта списка */
.qodef-tabs .qodef-tabs-navigation li.ui-state-active, .qodef-tabs .qodef-tabs-navigation li.ui-tabs-active { box-shadow: none !important; }
/* 05.10 23:40 QA-2305 п.4: активная вкладка — одна фирменная фиолетовая рамка, без тёмной рамки и внутренней полосы */
html body .qodef-tabs.qodef-tabs .qodef-tabs-navigation li.ui-state-active a, html body .qodef-tabs.qodef-tabs .qodef-tabs-navigation li.ui-tabs-active a { border: 1.5px solid #7D1FAA !important; border-color: #7D1FAA !important; box-shadow: none !important; outline: 0; }