/* Ecommerce SEO — "the catalogue transit map" (prefix ecs) */
.cinema-page--service-ecommerce-seo { --ecs-red: #e2564b; --ecs-sage: #8fcf9a; }

/* Atmosphere: transit-plan grid */
.set--ecs-plan::before { inset: 0; background: linear-gradient(90deg, rgba(90, 167, 178, .06) 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(rgba(90, 167, 178, .06) 1px, transparent 1px) 0 0 / 88px 88px; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); }
.set--ecs-plan::after { inset: 15% -10% auto 40%; height: 50%; background: radial-gradient(closest-side, rgba(224, 169, 95, .1), transparent); filter: blur(40px); }

/* ---------- Hero: catalogue transit map ---------- */
.cx-hero--ecs_metro .cx-hero__visual { width: min(100%, 570px); }
.ecs-metro { position: relative; padding-bottom: 46px; }
.js .ecs-metro { opacity: 0; transform: translateY(26px); }
.is-ready .ecs-metro { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.ecs-metro__panel { position: relative; padding: 14px 14px 12px; border-radius: 22px; border: 1px solid rgba(255, 236, 214, .13); background: radial-gradient(90% 60% at 30% 0%, rgba(224, 169, 95, .08), transparent 60%), linear-gradient(180deg, #151210, #0c0a09); box-shadow: 0 0 0 6px rgba(255, 236, 214, .02), 0 80px 120px -60px rgba(90, 167, 178, .4), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.ecs-metro__bar { display: flex; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 10px; letter-spacing: .18em; color: var(--gold-l); direction: ltr; white-space: nowrap; }
.ecs-metro__bar span { display: inline-flex; align-items: center; gap: 8px; }
.ecs-metro__bar span:last-child { color: var(--muted); }
.ecs-metro__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ecs-sage); box-shadow: 0 0 10px var(--ecs-sage); animation: ecsBlink 2.4s ease-in-out infinite; }
@keyframes ecsBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ecs-metro__map { position: relative; margin-top: 12px; aspect-ratio: 520 / 320; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(60% 60% at 80% 50%, rgba(224, 169, 95, .07), transparent 70%), #0d0b0a; }
.ecs-metro__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ecs-metro__grid path { stroke: rgba(255, 236, 214, .045); stroke-width: 1; }
.ecs-metro__line { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 45%, transparent)); }
.js .ecs-metro__line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-ready .ecs-metro__line { animation: ecsDraw 1.6s var(--ease-cine) calc(.7s + var(--i) * .3s) forwards; }
@keyframes ecsDraw { to { stroke-dashoffset: 0; } }
.ecs-metro__train { fill: none; stroke: #fff8ec; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 97; opacity: 0; filter: drop-shadow(0 0 6px #fff); }
.is-ready .ecs-metro__train, html:not(.js) .ecs-metro__train { animation: ecsTrain var(--t) linear calc(var(--dl) + 1.4s) infinite; }
@keyframes ecsTrain { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -97; opacity: 0; } }
.ecs-metro__stub { fill: none; stroke: rgba(255, 236, 214, .28); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 8; }
.ecs-metro__st { fill: #0d0b0a; stroke: #f6eee5; stroke-width: 3; }
.ecs-metro__st--hub { fill: #f6eee5; stroke: #0d0b0a; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(246, 238, 229, .5)); }
.ecs-metro__st--end { fill: #f6eee5; stroke: var(--gold); stroke-width: 4; }
.ecs-metro__x circle { fill: #0d0b0a; stroke: var(--ecs-red); stroke-width: 2; }
.ecs-metro__x path { stroke: var(--ecs-red); stroke-width: 2; stroke-linecap: round; }
.ecs-metro__lb, .ecs-metro__param { position: absolute; z-index: 2; left: var(--x); top: var(--y); white-space: nowrap; pointer-events: none; }
.ecs-metro__lb { padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(13, 11, 10, .9); font-size: 12px; font-weight: 800; transform: translate(-50%, calc(-100% - 13px)); }
.ecs-metro__lb--down, .ecs-metro__lb--prd, .ecs-metro__lb--hub { transform: translate(-50%, 14px); }
.ecs-metro__lb--left { transform: translate(calc(-100% - 14px), -50%); }
.ecs-metro__lb--hub { transform: translate(-50%, 18px); border-color: rgba(246, 238, 229, .4); background: #f6eee5; color: #14100d; font-weight: 900; }
.ecs-metro__lb--prd, .ecs-metro__lb--prd-up { border-color: rgba(224, 169, 95, .5); color: var(--gold-l); }
.ecs-metro__param { font-size: 10px; color: rgba(226, 86, 75, .9); transform: translate(calc(-100% - 12px), -50%); direction: ltr; }
.js .ecs-metro__lb, .js .ecs-metro__param { opacity: 0; }
.is-ready .ecs-metro__lb, .is-ready .ecs-metro__param { opacity: 1; transition: opacity .8s var(--ease-out) 1.9s; }
.ecs-metro__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.ecs-metro__legend li { display: inline-flex; align-items: center; gap: 8px; }
.ecs-metro__legend i { display: block; flex: none; }
.ecs-metro__lg--idx i { width: 24px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--teal), var(--terra-l)); }
.ecs-metro__lg--ctl i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ecs-red); }
.ecs-metro__lg--prd i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--gold); background: #f6eee5; }
.ecs-rich { position: absolute; z-index: 3; left: -9%; bottom: -26px; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; width: 252px; padding: 14px; border-radius: 16px; background: #f7f3ec; color: #1a1512; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95); rotate: -2.5deg; animation: ecsFloat 7s ease-in-out infinite; }
@keyframes ecsFloat { 50% { transform: translateY(-8px); } }
.ecs-rich__thumb { position: relative; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #f3c27a, #d26a4e); }
.ecs-rich__thumb i { position: absolute; inset: 13px 11px 11px; border-radius: 5px; background: rgba(255, 250, 243, .9); box-shadow: inset 0 -8px 0 rgba(210, 106, 78, .25); }
.ecs-rich__body { display: grid; gap: 5px; min-width: 0; }
.ecs-rich__body small { font-size: 9.5px; color: #2e7d32; direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecs-rich__body b { font-size: 15px; font-weight: 900; color: #23378f; }
.ecs-rich__lines { display: grid; gap: 4px; }
.ecs-rich__lines i { height: 5px; border-radius: 3px; background: #ddd3c4; }
.ecs-rich__lines i:last-child { width: 70%; }
.ecs-rich__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ecs-rich__chips span { padding: 2px 8px; border-radius: 999px; background: rgba(46, 125, 50, .12); color: #2e6b31; font-size: 10.5px; font-weight: 800; }
.ecs-rich__ok { position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #3f9a4e; color: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
.ecs-rich__ok .ico { width: 14px; height: 14px; }

/* ---------- Page templates as hanging price tags ---------- */
.ecs-tags { position: relative; padding-top: 30px; }
.ecs-tags__rail { position: absolute; top: 6px; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2c241f, #6b5546 50%, #2c241f); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ecs-tags__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.ecs-tag { position: relative; padding-top: 30px; }
.ecs-tag__string { display: none; }
.ecs-tag__card { position: relative; height: 100%; padding: 40px clamp(18px, 1.8vw, 24px) 22px; border-radius: 34px 34px 16px 16px / 22px 22px 16px 16px; border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #1b1612), #15110e 60%); box-shadow: 0 34px 50px -34px rgba(0, 0, 0, .95); transform-origin: 50% -36px; animation: ecsSwing 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.ecs-tag__card::before { content: ""; position: absolute; top: -36px; left: 50%; width: 2px; height: 55px; margin-left: -1px; background: linear-gradient(#5a4b40, #c9b8a4); }
@keyframes ecsSwing { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
.ecs-tag__hole { position: absolute; top: 12px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7); }
.ecs-tag__type { display: inline-block; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font-size: 12.5px; font-weight: 900; }
.ecs-tag__card h3 { margin-top: 12px; font-size: 19.5px; font-weight: 900; line-height: 1.5; }
.ecs-tag__card p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 2; }
.ecs-tag__foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.ecs-tag__code { display: block; width: 72%; height: 24px; opacity: .55; background: repeating-linear-gradient(90deg, #f6eee5 0 2px, transparent 2px 4px, #f6eee5 4px 5px, transparent 5px 8px, #f6eee5 8px 11px, transparent 11px 13px, #f6eee5 13px 14px, transparent 14px 17px); }
.ecs-tag__foot small { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 800; line-height: 1.8; color: var(--c); }

/* ---------- Index gate ---------- */
.ecs-gate { width: min(100%, 500px); margin-inline: auto; padding: 18px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #151210, #0e0c0b); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .95); }
.ecs-gate__hopper { position: relative; height: 112px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 236, 214, .04), rgba(255, 236, 214, .01)); clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%); }
.ecs-gate__hopper i { position: absolute; top: -24px; left: calc(8% + var(--x)); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(27, 22, 18, .95); font: 600 10px/1.2 var(--mono); font-style: normal; color: var(--text-2); direction: ltr; white-space: nowrap; animation: ecsDrop 4.8s linear infinite; animation-delay: calc(var(--i) * -.62s); }
.ecs-gate__hopper i:nth-child(even) { color: rgba(226, 86, 75, .9); }
@keyframes ecsDrop { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.ecs-gate__label { display: grid; justify-items: center; gap: 2px; margin: 10px 0 14px; font-size: 16px; font-weight: 900; }
.ecs-gate__label .mono { font-size: 9.5px; letter-spacing: .2em; color: var(--muted); direction: ltr; }
.ecs-gate__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ecs-gate__lane { --c: var(--ecs-sage); position: relative; padding: 72px 10px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%); text-align: center; }
.ecs-gate__lane--merge { --c: var(--gold-l); }
.ecs-gate__lane--ctrl { --c: var(--ecs-red); }
.ecs-gate__track { position: absolute; top: 12px; left: 50%; width: 4px; height: 48px; margin-left: -2px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.ecs-gate__track i { position: absolute; top: 0; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: ecsLane 2.6s var(--ease-cine) infinite; }
.ecs-gate__track i:nth-child(2) { animation-delay: 1.3s; }
@keyframes ecsLane { 0% { top: -6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 44px; opacity: 0; } }
.ecs-gate__lane--merge .ecs-gate__track i:nth-child(1) { animation-name: ecsMergeA; animation-delay: 0s; }
.ecs-gate__lane--merge .ecs-gate__track i:nth-child(2) { animation-name: ecsMergeB; animation-delay: 0s; }
@keyframes ecsMergeA { 0% { top: -6px; left: -22px; opacity: 0; } 15% { opacity: 1; } 60% { top: 26px; left: -4px; } 85% { opacity: 1; } 100% { top: 44px; left: -4px; opacity: 0; } }
@keyframes ecsMergeB { 0% { top: -6px; left: 14px; opacity: 0; } 15% { opacity: 1; } 60% { top: 26px; left: -4px; opacity: 1; } 62%, 100% { top: 26px; left: -4px; opacity: 0; } }
.ecs-gate__lane--ctrl .ecs-gate__track::after { content: ""; position: absolute; top: 30px; left: -12px; width: 28px; height: 4px; border-radius: 2px; background: var(--ecs-red); box-shadow: 0 0 10px var(--ecs-red); }
.ecs-gate__lane--ctrl .ecs-gate__track i { animation-name: ecsBlock; }
@keyframes ecsBlock { 0% { top: -6px; opacity: 0; } 15% { opacity: 1; } 55% { top: 16px; opacity: 1; transform: scale(1); } 75%, 100% { top: 16px; opacity: 0; transform: scale(1.8); } }
.ecs-gate__lane b { display: block; font-size: 15.5px; font-weight: 900; color: var(--c); }
.ecs-gate__lane small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.75; color: var(--text-2); }
.ecs-gate__res { display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); font-size: 9px; letter-spacing: .12em; color: var(--c); direction: ltr; }

/* ---------- Discovery -> revenue step chart ---------- */
.ecs-steps { width: min(100%, 500px); margin-inline: auto; padding: 22px 22px 16px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(rgba(255, 236, 214, .035) 1px, transparent 1px) 0 22px / 100% 48px, var(--panel); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .95); }
.ecs-steps__plot { position: relative; height: 210px; }
.ecs-steps__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.ecs-steps__bar { --c: var(--teal); position: relative; display: block; height: var(--h); border-radius: 12px 12px 4px 4px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); transform-origin: bottom; }
.ecs-steps__bar:nth-child(2) { --c: var(--gold); }
.ecs-steps__bar:nth-child(3) { --c: var(--terra-l); }
.ecs-steps__bar:nth-child(4) { --c: var(--ecs-sage); }
.ecs-steps__bar i { position: absolute; top: -18px; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: #14100d; color: var(--c); font-style: normal; }
.ecs-steps__bar .ico { width: 16px; height: 16px; }
.js .ecs-steps__bar { transform: scaleY(0); }
.js .ecs-steps.is-in .ecs-steps__bar, .reveal-all .ecs-steps__bar { transform: none; transition: transform 1s var(--ease-cine) calc(.4s + var(--i) * .2s); }
.ecs-steps__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ecs-steps__line polyline { fill: none; stroke: #f6eee5; stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .7; }
.ecs-steps__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; text-align: center; }
.ecs-steps__labels li { font-size: 13.5px; font-weight: 900; line-height: 1.6; }
.ecs-steps__axis { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ecs-steps__axis .mono { font-size: 9.5px; letter-spacing: .2em; color: var(--muted); direction: ltr; }

/* ---------- Catalogue faults ---------- */
.ecs-faults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.ecs-fault { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--panel); transition: border-color .4s, transform .5s var(--ease-out); }
.ecs-fault:hover { border-color: rgba(226, 86, 75, .45); transform: translateY(-4px); }
.ecs-fault__art { position: relative; padding: 18px 22px 12px; border-bottom: 1px solid var(--line-2); background: radial-gradient(70% 90% at 50% 0%, rgba(226, 86, 75, .08), transparent 70%), #100d0b; }
.ecs-fault__art svg { display: block; width: 100%; height: auto; max-height: 112px; }
.ecs-fault__no { position: absolute; top: 10px; left: 14px; font-size: 9.5px; letter-spacing: .18em; color: var(--ecs-red); direction: ltr; }
.ecs-fault__body { flex: 1; padding: 20px clamp(18px, 2vw, 26px) 0; }
.ecs-fault__tag { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(226, 86, 75, .4); background: rgba(226, 86, 75, .1); color: #f08a7f; font-size: 12.5px; font-weight: 900; }
.ecs-fault__body h3 { margin-top: 12px; font-size: 19.5px; font-weight: 900; line-height: 1.5; }
.ecs-fault__body p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 2; }
.ecs-fault__fix { display: flex; align-items: flex-start; gap: 10px; margin: 18px clamp(18px, 2vw, 26px) 22px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(143, 207, 154, .32); background: rgba(143, 207, 154, .07); color: #d3ecd6; font-size: 14px; font-weight: 800; line-height: 1.85; }
.ecs-fault__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--ecs-sage); color: #0f2414; }
.ecs-fault__ico .ico { width: 13px; height: 13px; }
.ecs-art__main { fill: rgba(224, 169, 95, .14); stroke: var(--gold); stroke-width: 1.5; }
.ecs-art__wire { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ecs-art__spawn rect { fill: rgba(226, 86, 75, .12); stroke: rgba(226, 86, 75, .55); stroke-width: 1; animation: ecsSpawn 5s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes ecsSpawn { 0%, 100% { opacity: .25; } 40%, 60% { opacity: 1; } }
.ecs-art__shelf { stroke: rgba(255, 236, 214, .3); stroke-width: 2; }
.ecs-art__box { fill: rgba(224, 169, 95, .22); stroke: var(--gold); stroke-width: 1.3; }
.ecs-art__gap { fill: rgba(226, 86, 75, .06); stroke: var(--ecs-red); stroke-width: 1.4; stroke-dasharray: 3 3; animation: ecsBlink 2.2s ease-in-out infinite; }
.ecs-art__404 { fill: var(--ecs-red); font: 700 10px var(--mono); }
.ecs-art__dup rect { fill: rgba(127, 183, 192, .08); stroke: #7fb7c0; stroke-width: 1.3; }
.ecs-art__dup .ecs-art__img { fill: rgba(127, 183, 192, .22); stroke: none; }
.ecs-art__dup path { stroke: rgba(255, 236, 214, .3); stroke-width: 2; stroke-linecap: round; }
.ecs-art__dup { animation: ecsDup 6s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes ecsDup { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ecs-art__frame { fill: none; stroke: rgba(255, 236, 214, .25); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ecs-art__txt { fill: none; stroke: var(--ecs-sage); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; animation: ecsWrite 5s var(--ease-cine) infinite; }
@keyframes ecsWrite { 0%, 15% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.ecs-art__cell { fill: rgba(255, 236, 214, .05); stroke: rgba(255, 236, 214, .16); stroke-width: 1; }

/* ---------- Related pages as a metro line ---------- */
.ecs-line { position: relative; padding-top: 6px; }
.ecs-line__track { position: absolute; top: 19px; left: 6%; right: 6%; height: 6px; overflow: hidden; border-radius: 3px; background: linear-gradient(90deg, var(--ecs-sage), var(--teal) 34%, var(--gold) 66%, var(--terra-l)); opacity: .85; }
.ecs-line__track i { position: absolute; top: 0; right: -60px; width: 50px; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: ecsRun 5s linear infinite; }
@keyframes ecsRun { to { right: 110%; } }
.ecs-line ul { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ecs-stop { display: grid; justify-items: center; gap: 6px; padding: 0 8px 18px; text-align: center; }
.ecs-stop__dot { width: 32px; height: 32px; border-radius: 50%; border: 6px solid var(--c); background: #0d0b0a; box-shadow: 0 0 0 5px var(--bg), 0 0 18px color-mix(in srgb, var(--c) 50%, transparent); transition: transform .4s var(--ease-snap), background .4s; }
.ecs-stop__code { margin-top: 8px; font-size: 9.5px; letter-spacing: .18em; color: var(--c); direction: ltr; }
.ecs-stop strong { font-size: 16.5px; font-weight: 900; line-height: 1.5; transition: color .3s; }
.ecs-stop small { font-size: 13px; color: var(--muted); line-height: 1.8; }
.ecs-stop__go { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--c); transition: transform .4s var(--ease-out); }
.ecs-stop:hover .ecs-stop__dot, .ecs-stop:focus-visible .ecs-stop__dot { transform: scale(1.15); background: var(--c); }
.ecs-stop:hover strong, .ecs-stop:focus-visible strong { color: var(--c); }
.ecs-stop:hover .ecs-stop__go, .ecs-stop:focus-visible .ecs-stop__go { transform: translateX(-4px); }

/* ---------- CTA: product search result ---------- */
.cta__visual--ecs_result { justify-items: center; }
.ecs-res { position: relative; width: min(100%, 380px); padding: 16px; border-radius: 22px; background: #f7f3ec; color: #1a1512; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .95); rotate: 2deg; animation: ecsFloat 7s ease-in-out infinite; }
.ecs-res__search { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid #ddd3c4; background: #fff; font-size: 13.5px; font-weight: 800; }
.ecs-res__search span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-inline-start: 3px; vertical-align: -2px; background: #23378f; animation: ecsBlink 1s steps(1) infinite; }
.ecs-res__search i { display: grid; color: #5a6b8a; font-style: normal; }
.ecs-res__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5dccd; }
.ecs-res__thumb { position: relative; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #f3c27a, #d26a4e); }
.ecs-res__thumb i { position: absolute; inset: 16px 13px 12px; border-radius: 6px; background: rgba(255, 250, 243, .92); }
.ecs-res__thumb i + i { inset: 10px 20px auto auto; width: 16px; height: 12px; border-radius: 3px; background: #2a3f9d; }
.ecs-res__body small { display: block; font-size: 10px; color: #2e7d32; direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecs-res__title { margin-top: 3px; font-size: 16px; font-weight: 900; color: #23378f; }
.ecs-res__rows { display: grid; gap: 7px; margin-top: 10px; }
.ecs-res__rows li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.ecs-res__rows li > i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #b9ae9d; color: #fff; font-style: normal; }
.ecs-res__rows .ico { width: 11px; height: 11px; }
.js .ecs-res__rows .ico { opacity: 0; }
.js .ecs-res.is-in .ecs-res__rows li > i, .reveal-all .ecs-res__rows li > i, html:not(.js) .ecs-res__rows li > i { border-color: #3f9a4e; background: #3f9a4e; transition: background .3s calc(.7s + var(--i) * .3s), border-color .3s calc(.7s + var(--i) * .3s); }
.js .ecs-res.is-in .ecs-res__rows .ico, .reveal-all .ecs-res__rows .ico { opacity: 1; transition: opacity .3s calc(.7s + var(--i) * .3s); }
.ecs-res__ok { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(46, 125, 50, .12); color: #2e6b31; font-size: 12.5px; font-weight: 900; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.cx-hero--ecs_metro .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 540px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.ecs-rich { left: -2%; }
	.ecs-tags__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
	.ecs-tags__rail { display: none; }
}
@media (max-width: 860px) {
	.ecs-faults { grid-template-columns: 1fr; }
	.ecs-line__track { top: 0; bottom: 0; left: auto; right: 15px; width: 6px; height: auto; background: linear-gradient(180deg, var(--terra-l), var(--gold) 34%, var(--teal) 66%, var(--ecs-sage)); }
	.ecs-line__track i { display: none; }
	.ecs-line ul { grid-template-columns: 1fr; gap: 10px; }
	.ecs-stop { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "dot code go" "dot title go" "dot sub go"; justify-items: start; align-items: center; column-gap: 16px; row-gap: 2px; padding: 12px 0; text-align: start; }
	.ecs-stop__dot { grid-area: dot; }
	.ecs-stop__code { grid-area: code; margin-top: 0; }
	.ecs-stop strong { grid-area: title; }
	.ecs-stop small { grid-area: sub; }
	.ecs-stop__go { grid-area: go; }
}
@media (max-width: 640px) {
	.cx-hero--ecs_metro .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.ecs-metro { padding-bottom: 0; }
	.ecs-metro__panel { padding: 10px; }
	.ecs-metro__bar span:last-child { display: none; }
	.ecs-metro__lb { font-size: 10px; padding: 2px 6px; transform: translate(-50%, calc(-100% - 8px)); }
	.ecs-metro__lb--down, .ecs-metro__lb--prd, .ecs-metro__lb--hub { transform: translate(-50%, 8px); }
	.ecs-metro__lb--left { transform: translate(calc(-100% - 10px), -50%); }
	.ecs-metro__param { font-size: 8.5px; }
	.ecs-metro__legend { font-size: 11px; gap: 6px 12px; }
	.ecs-rich { position: relative; left: auto; bottom: auto; width: min(88%, 300px); margin: 14px auto 0; }
	.ecs-tags__list { grid-template-columns: 1fr; }
	.ecs-gate { padding: 14px; }
	.ecs-gate__lanes { gap: 6px; }
	.ecs-gate__lane { padding: 66px 6px 12px; }
	.ecs-gate__lane b { font-size: 14px; }
	.ecs-gate__lane small { font-size: 11.5px; }
	.ecs-steps { padding: 18px 14px 14px; }
	.ecs-steps__bars, .ecs-steps__labels { gap: 8px; }
	.ecs-steps__labels li { font-size: 12px; }
	.ecs-res { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
	.ecs-metro__bar i, .ecs-metro__train, .ecs-rich, .ecs-tag__card, .ecs-gate__hopper i, .ecs-gate__track i, .ecs-art__spawn rect, .ecs-art__gap, .ecs-art__dup, .ecs-art__txt, .ecs-line__track i, .ecs-res, .ecs-res__search span::after { animation: none !important; }
	.is-ready .ecs-metro__line { animation: none; stroke-dashoffset: 0; }
	.ecs-metro__train, .ecs-gate__track i { display: none; }
	.ecs-art__txt { stroke-dashoffset: 0; }
	.ecs-steps__bar { transition: none !important; }
}