.legacy-lower-info { color: #e6e5ed; background: #2f2e42; }
.legacy-lower-gallery__track a { background: #46435f; }.legacy-lower-gallery__empty { color: #d7d5e0; background: #46435f; }.legacy-lower-link { color: var(--legacy-yellow); }
.legacy-lower-feature { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 92px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.legacy-lower-feature:hover h3, .legacy-lower-feature:focus-visible h3 { color: var(--legacy-yellow); }.legacy-lower-feature:focus-visible { outline: 2px solid var(--legacy-yellow); outline-offset: 5px; }.legacy-lower-feature h3 { margin: 0; color: #e6e5ed; font-weight: 300; transition: color .18s ease; }.legacy-lower-feature > span:not(.legacy-visually-hidden) { display: grid; min-width: 25px; height: 25px; place-items: center; padding: 0 8px; border: 1px solid rgba(255,255,255,.42); border-radius: 15px; color: var(--legacy-yellow); font-size: 10px; font-weight: 700; text-transform: uppercase; transition: color .18s ease, background .18s ease; }.legacy-lower-feature:hover > span:not(.legacy-visually-hidden), .legacy-lower-feature:focus-visible > span:not(.legacy-visually-hidden) { color: #302509; background: var(--legacy-yellow); }
.legacy-lower-info__text { color: rgba(255,255,255,.72); }.legacy-lower-info__text strong { color: var(--legacy-yellow); }
.legacy-infographic-dialog { width: min(900px, calc(100vw - 20px)); max-height: calc(100vh - 40px); margin: 20px auto; padding: 0; border: 0; background: transparent; color: #2f2e42; }.legacy-infographic-dialog::backdrop { background: rgba(47,46,66,.8); }.legacy-infographic-dialog__box { position: relative; overflow: auto; max-height: inherit; padding: 30px; background: #fff; }.legacy-infographic-dialog__header { margin-bottom: 30px; }.legacy-infographic-dialog h2 { margin: 0 38px 5px 0; color: #2f2e42; font-size: 22px; font-weight: 600; line-height: normal; text-transform: uppercase; }.legacy-infographic-dialog__body { width: 100%; color: #2f2e42; font-size: 16px; line-height: normal; }.legacy-infographic-dialog__body > :first-child { margin-top: 0; }.legacy-infographic-dialog__body > :last-child { margin-bottom: 0; }.legacy-infographic-dialog__close { position: absolute; top: 15px; right: 15px; z-index: 3; display: grid; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; place-items: center; background: #e7e7ee; color: #8e8daf; font-size: 20px; font-weight: 400; line-height: 1; cursor: pointer; }.legacy-infographic-dialog__close:hover, .legacy-infographic-dialog__close:focus-visible { background: #cac9d9; color: #2f2e42; outline: none; }
@media (max-width: 640px) { .legacy-lower-info__features { gap: 5px; }.legacy-lower-feature { grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 82px; border-bottom: 1px solid rgba(255,255,255,.15); }.legacy-lower-feature img { width: 58px; height: 58px; }.legacy-lower-feature h3 { font-size: 16px; }.legacy-lower-feature > span:not(.legacy-visually-hidden) { min-width: 0; width: 25px; padding: 0; overflow: hidden; font-size: 0; }.legacy-lower-feature > span:not(.legacy-visually-hidden)::after { content: '+'; font-size: 19px; }.legacy-lower-info__text { margin-top: 42px; }.legacy-infographic-dialog__box { padding: 34px 25px 30px; }.legacy-infographic-dialog h2 { font-size: 26px; }.legacy-infographic-dialog [data-infographic-dialog-content] { font-size: 15px; } }

.legacy-home-v1 .legacy-lower-info:not(.legacy-infographics) { display: none; }
.legacy-home-v1 .legacy-infographics { position: relative; z-index: 3; padding: 100px 0; overflow: hidden; color: #e6e5ed; background: #2f2e42; }
/* Direct source port: `style.css` paints a shallow shadow bridge from the
   preceding block before the infographic field begins. */
.legacy-home-v1 .legacy-infographics::before { position: absolute; z-index: 2; top: -80px; width: 100%; height: 80px; content: ''; box-shadow: 0 30px 50px rgba(0,0,0,.1); pointer-events: none; }
.legacy-home-v1 .legacy-infographics__background { position: absolute; top: 0; width: 100%; height: 1000px; z-index: 3; pointer-events: none; }
.legacy-home-v1 .legacy-infographics__background::before,
.legacy-home-v1 .legacy-infographics__background::after { position: absolute; z-index: 0; width: 380px; height: 380px; content: ''; background: center / contain no-repeat; pointer-events: none; }
.legacy-home-v1 .legacy-infographics__background::before { top: -140px; right: -170px; background-image: url('/static/site-assets/legacy-particles-right.png'); }
.legacy-home-v1 .legacy-infographics__background::after { bottom: 110px; left: -80px; background-image: url('/static/site-assets/legacy-particles-left.png'); }
.legacy-home-v1 .legacy-infographics > .legacy-wrap { position: relative; z-index: 5; }
.legacy-home-v1 .legacy-infographics__row { display: flex; align-items: center; margin: 0 -25px 50px; }
.legacy-home-v1 .legacy-infographics__column { flex: 1 1 50%; max-width: 50%; padding: 0 25px; }
/* Source `.infographics-slider-wrapper` frames the gallery with a camera
   sticker.  The real gallery remains above it and fully interactive. */
.legacy-home-v1 .legacy-infographics__media { position: relative; padding: 0 50px; }
.legacy-home-v1 .legacy-infographics__media::before { position: absolute; z-index: 0; top: -60px; left: -50px; width: 150px; height: 150px; content: ''; background: 100% 0 / contain no-repeat; background-image: url('/static/site-assets/legacy-media-photo.png'); pointer-events: none; }
/* `index.php` allocates 430px to the source slider.  A contained photo is
   deliberate here: gallery covers have varying ratios and must not lose a
   meaningful part of the image merely to fill the frame. */
.legacy-home-v1 .legacy-infographics__media-frame { position: relative; z-index: 1; min-height: 430px; background: #242334 center / 150px 150px no-repeat url('/static/site-assets/legacy-media-photo.png'); }
.legacy-home-v1 .legacy-infographics__gallery-track { height: 430px; background: #242334 center / 150px 150px no-repeat url('/static/site-assets/legacy-media-photo.png'); }
.legacy-home-v1 .legacy-infographics__gallery-track a { position: relative; display: block; height: 100%; overflow: hidden; }
.legacy-home-v1 .legacy-infographics__gallery-track [hidden] { display: none !important; }
.legacy-home-v1 .legacy-infographics__gallery-track img { display: block; width: 100%; height: 100%; object-fit: contain; }
.legacy-home-v1 .legacy-infographics__gallery-track a > span { position: absolute; right: 0; bottom: 0; left: 0; padding: 17px 25px 70px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); font-size: 21px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.legacy-home-v1 .legacy-infographics__gallery-controls { position: absolute; top: 50%; right: 0; left: 0; z-index: 2; display: flex; justify-content: space-between; padding: 0 8px; pointer-events: none; transform: translateY(-50%); }
.legacy-home-v1 .legacy-infographics__gallery-controls button { width: 40px; height: 50px; padding: 0; border: 0; color: var(--legacy-yellow); background: transparent; font-size: 54px; line-height: 1; pointer-events: auto; cursor: pointer; }
.legacy-home-v1 .legacy-infographics__gallery-controls button:disabled { opacity: .35; cursor: default; }
.legacy-home-v1 .legacy-infographics__gallery-link { position: absolute; bottom: 20px; left: 25px; z-index: 3; display: inline-block; max-width: calc(100% - 50px); box-sizing: border-box; padding: 11px 25px; border-radius: 24px; color: #302509; background: var(--legacy-yellow); font-size: 13px; font-weight: 800; line-height: 1.15; text-decoration: none; text-transform: uppercase; overflow-wrap: anywhere; }
.legacy-home-v1 .legacy-infographics__media-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.legacy-home-v1 .legacy-infographics__items { position: relative; z-index: 1; }
.legacy-home-v1 .legacy-infographics__source-row { display: flex; flex-flow: row wrap; margin-right: -1rem; margin-left: -1rem; }
.legacy-home-v1 .legacy-infographics__source-col { flex-basis: 50%; max-width: 50%; padding: 0 15px; }
.legacy-home-v1 .legacy-infographics__item { position: relative; display: inline-block; width: 100%; padding: 0; border: 0; color: #e6e6e6; background: transparent; font: inherit; text-align: right; cursor: pointer; transition: background .3s ease, transform .4s ease, opacity .4s ease; }
.legacy-home-v1 .legacy-infographics__item-wrapper { display: inline-block; max-width: 250px; }
.legacy-home-v1 .legacy-infographics__item--secondary { text-align: left; }
.legacy-home-v1 .legacy-infographics__item-copy { position: relative; z-index: 1; display: block; max-width: 200px; color: #e6e6e6; font-size: 1.25em; font-weight: 100; line-height: normal; transition: opacity .3s ease, transform .3s ease; }
.legacy-home-v1 .legacy-infographics__item-image { position: relative; z-index: 1; display: block; padding: 25px; opacity: .6; transition: opacity .2s ease, transform .2s ease; }
.legacy-home-v1 .legacy-infographics__item-image img { display: block; width: auto; height: 110px; }
.legacy-home-v1 .legacy-infographics__item:hover .legacy-infographics__item-image,
.legacy-home-v1 .legacy-infographics__item:focus-visible .legacy-infographics__item-image { opacity: 1; transform: scale(1.05); }
.legacy-home-v1 .legacy-infographics__item:hover .legacy-infographics__item-copy,
.legacy-home-v1 .legacy-infographics__item:focus-visible .legacy-infographics__item-copy { transform: translateY(20px); }
.legacy-home-v1 .legacy-infographics__item--secondary:hover .legacy-infographics__item-copy,
.legacy-home-v1 .legacy-infographics__item--secondary:focus-visible .legacy-infographics__item-copy { transform: translateY(-20px); }
.legacy-home-v1 .legacy-infographics__item:hover,
.legacy-home-v1 .legacy-infographics__item:focus-visible { background: radial-gradient(circle closest-side, #3a3851 0, transparent 100%); }
.legacy-home-v1 .legacy-infographics__item:focus-visible { outline: 2px solid var(--legacy-yellow); outline-offset: 4px; }
.legacy-home-v1 .legacy-infographics__item-line { position: absolute; z-index: 0; width: 150px; height: 150px; background: center / contain no-repeat; pointer-events: none; }
.legacy-home-v1 .legacy-infographics__item-line--1 { top: 30px; right: -80px; background-image: url('/static/site-assets/legacy-line-1.png'); }
.legacy-home-v1 .legacy-infographics__item-line--3 { right: -60px; bottom: 90px; background-image: url('/static/site-assets/legacy-line-3.png'); transform: scale(-1); }
.legacy-home-v1 .legacy-infographics__item-line--4 { top: -120px; left: 170px; background-image: url('/static/site-assets/legacy-line-2.png'); transform: rotate(120deg); }
.legacy-home-v1 .legacy-infographics__text { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.55; text-align: center; }
.legacy-home-v1 .legacy-infographics__text p { margin: 0 0 16px; }
/* Production `.info-graphics__text-accent` deliberately uses the warmer
   orange #f9b115 rather than the button yellow. */
.legacy-home-v1 .legacy-infographics__accent { color: #f9b115; font-weight: 700; }
/* Literal `info-graphics__button` dimensions from production `style.css`.
   The actual anchor, not a smaller decorative pseudo-element, owns the yellow
   hit area so its text always has the source 20px horizontal inset. */
.legacy-home-v1 .legacy-infographics__button { position:relative;z-index:1;display:flex;height:150px;margin-top:0;align-items:center;justify-content:center;background:url('/static/legacy-source/images/clouds-bg.png') 50%/contain no-repeat;text-align:center }
.legacy-home-v1 .legacy-infographics__button .legacy-lower-button { display:inline-block;margin:0;padding:10px 20px;border:0;border-radius:20px;box-sizing:content-box;color:#302509;background:#fcea1c;font-size:1.1em;font-weight:600;line-height:20.24px;white-space:nowrap;text-decoration:none;text-transform:uppercase;transition:transform .3s ease,background-color .3s ease }
.legacy-home-v1 .legacy-infographics__button .legacy-lower-button:hover { color:#5b4611;background:#fbe703;transform:scale(1.1) }
.legacy-home-v1 .legacy-infographics__button .legacy-lower-button:focus-visible { outline:2px solid #fcea1c;outline-offset:5px }
.legacy-home-v1 #games_section { display: block; scroll-margin-top: 74px; }

.legacy-home-v1 .legacy-infographics__item.legacy-reveal { opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.legacy-home-v1 .legacy-infographics__item.legacy-infographics__reveal--1 { transform: translate3d(-100px, -100px, 0); }
.legacy-home-v1 .legacy-infographics__item.legacy-infographics__reveal--2 { transform: translate3d(100px, -100px, 0); transition-delay: .1s; }
.legacy-home-v1 .legacy-infographics__item.legacy-infographics__reveal--3 { transform: translate3d(-100px, 100px, 0); transition-delay: .3s; }
.legacy-home-v1 .legacy-infographics__item.legacy-infographics__reveal--4 { transform: translate3d(100px, 100px, 0); transition-delay: .2s; }
.legacy-home-v1 .legacy-infographics__item.legacy-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* Literal production adaptive placement for the camera sticker. */
@media only screen and (max-width: 1599px) {
  .legacy-home-v1 .legacy-infographics__media::before { left: 25px; top: -58px; }
}

/* The three arrows are one desktop composition.  Keep their source dimensions
   until the narrow layout removes the diagram as a whole: shrinking or hiding
   individual paths at a normal desktop width breaks the visual connection
   between the four illustrations. */
@media only screen and (max-width: 1520px) {
  .legacy-home-v1 .legacy-infographics__column { padding: 0; }
}

@media (max-width: 75em) {
  .legacy-home-v1 .legacy-infographics__item-image img { height: 80px; }
  .legacy-home-v1 .legacy-infographics__item-line { display: none; }
}

@media (max-width: 62em) {
  .legacy-home-v1 .legacy-infographics__item-line,
  .legacy-home-v1 .legacy-infographics__item-line--4 { display: block; }
}

@media (max-width: 760px) {
  .legacy-home-v1 .legacy-infographics { padding: 20px 0 50px; }
  .legacy-home-v1 .legacy-infographics__background::before,
  .legacy-home-v1 .legacy-infographics__background::after { display: none; }
  .legacy-home-v1 .legacy-infographics__media-frame { min-height: 210px; margin-bottom: 18px; }
  .legacy-home-v1 .legacy-infographics__gallery-track { height: 210px; }
  .legacy-home-v1 .legacy-infographics__gallery-track a > span { padding: 12px 14px 54px; font-size: 15px; }
  .legacy-home-v1 .legacy-infographics__gallery-controls { padding: 0 2px; }
  .legacy-home-v1 .legacy-infographics__gallery-controls button { width: 32px; height: 42px; font-size: 42px; }
  .legacy-home-v1 .legacy-infographics__gallery-link { bottom: 12px; left: 14px; max-width: calc(100% - 28px); padding: 9px 16px; font-size: 11px; }
  .legacy-home-v1 .legacy-infographics__row { display: block; margin: 0 0 28px; }
  .legacy-home-v1 .legacy-infographics__column { max-width: none; padding: 0; }
  .legacy-home-v1 .legacy-infographics__items { gap: 12px 4px; }
  .legacy-home-v1 .legacy-infographics__item { box-sizing: border-box; max-width: 100%; min-height: 145px; padding-right: 50px; }
  .legacy-home-v1 .legacy-infographics__item:not(.legacy-infographics__item--secondary) { justify-self: stretch; }
  .legacy-home-v1 .legacy-infographics__item-copy { max-width: 145px; min-height: 38px; font-size: 14px; line-height: 1.05; }
  .legacy-home-v1 .legacy-infographics__item-image { padding: 12px; }
  .legacy-home-v1 .legacy-infographics__item-image img { height: 78px; }
  .legacy-home-v1 .legacy-infographics__item-line { display: none; }
  .legacy-home-v1 .legacy-infographics__text { font-size: 15px; line-height: 1.35; }
}

/* At tablet width production separates the photo slider and the two source
   rows, then lays those rows side by side.  This deliberately preserves the
   original arrow paths instead of turning the diagram into generic cards. */
@media (max-width: 1024px) and (min-width: 761px) {
  .legacy-home-v1 .legacy-infographics__row { display: block; text-align: center; }
  .legacy-home-v1 .legacy-infographics__column { display: block; max-width: 80%; margin: 0 auto; }
  .legacy-home-v1 .legacy-infographics__items { left: -17vw; width: 108vw; }
  .legacy-home-v1 .legacy-infographics__source-row { display: inline-block; width: 49%; margin-top: 6vw; vertical-align: top; }
  .legacy-home-v1 .legacy-infographics__source-col { display: block; width: 49%; float: left; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-home-v1 .legacy-infographics__item.legacy-reveal,
  .legacy-home-v1 .legacy-infographics__item.legacy-reveal.is-visible,
  .legacy-home-v1 .legacy-infographics__item:hover .legacy-infographics__item-copy,
  .legacy-home-v1 .legacy-infographics__item:focus-visible .legacy-infographics__item-copy { opacity: 1; transform: none; transition: none; }
}

/* Source `index.php` composition.  The home port originally renamed these
   nodes and accidentally changed their inline-block alignment; keeping the
   production hierarchy makes the three connector paths sit outside copy.
   Reserve the legacy slider's space before a lazy VK cover is decoded: with
   natural image dimensions alone the zero-height box could put its CTA above
   the photo on a narrow screen. */
.legacy-home-v1 .infographics.legacy-infographics > .center-wrapper { width:min(1360px, calc(100% - 30px)); }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__media { padding:0; }
.legacy-home-v1 .infographics.legacy-infographics .infographics-slider-wrapper { position:relative; min-height:430px; padding:0 50px; background:none; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__gallery-track { height:430px; background:none; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__gallery-track a { height:430px; overflow:hidden; }
.legacy-home-v1 .infographics.legacy-infographics .infographics-slider__item { height:100%; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__gallery-track img { width:100%; height:100%; object-fit:contain; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item { text-align:initial; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item-wrapper { display:block; max-width:250px; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item-copy { text-align:right; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item--secondary .legacy-infographics__item-copy { text-align:left; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item-image { text-align:right; }
.legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__item-image img { display:inline; width:auto; height:110px; }

@media (max-width:760px) {
  .legacy-home-v1 .infographics.legacy-infographics .infographics-slider-wrapper { min-height:210px; padding:0; }
  .legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__gallery-track,
  .legacy-home-v1 .infographics.legacy-infographics .legacy-infographics__gallery-track a { height:210px; }
}