.elementor-21 .elementor-element.elementor-element-ac308ec{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21 .elementor-element.elementor-element-cb1e3de{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21 .elementor-element.elementor-element-be7b600{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-ac308ec */.chess-sequence-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#chess-sequence {
  display: block;
  width: 100%;
  height: 100vh;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.hero-title,
.hero-slogan,
.hero-button {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

.hero-title {
  opacity: 1; /* название видно сразу */
  transform: translateY(0);
  margin: 0;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1;
  color: #fff;
}

.hero-slogan {
  margin: 24px 0 0;
  max-width: 720px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.3;
  color: #fff;
}

.hero-button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 16px 28px;
  border-radius: 0px;
  text-decoration: none;
  background: #FFB339;
  color: #191917 !important;
  font-weight: 600;
  transition: transform 0.2s ease;
}

.hero-button:hover {
  transform: translateY(-2px);
}/* End custom CSS */