@charset "UTF-8";

.glightbox-container {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999 !important;
   overflow: hidden;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   text-size-adjust: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   outline: 0
}

.glightbox-container.inactive {
   display: none
}

.glightbox-container .gcontainer {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 9999;
   overflow: hidden
}

.glightbox-container .gslider {
   -webkit-transition: -webkit-transform .4s ease;
   transition: -webkit-transform .4s ease;
   transition: transform .4s ease;
   transition: transform .4s ease, -webkit-transform .4s ease;
   height: 100%;
   left: 0;
   top: 0;
   width: 100%;
   position: relative;
   overflow: hidden;
   display: -webkit-box !important;
   display: -ms-flexbox !important;
   display: flex !important;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translateZ(0)
}

.glightbox-container .gslide {
   width: 100%;
   position: absolute;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   opacity: 0
}

.glightbox-container .gslide.current {
   opacity: 1;
   z-index: 99999;
   position: relative
}

.glightbox-container .gslide.prev {
   opacity: 1;
   z-index: 9999
}

.glightbox-container .gslide-inner-content {
   width: 100%
}

.glightbox-container .ginner-container {
   position: relative;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   max-width: 100%;
   margin: auto;
   height: 100vh
}

.glightbox-container .ginner-container.gvideo-container {
   width: 100%
}

.glightbox-container .ginner-container.desc-bottom,
.glightbox-container .ginner-container.desc-top {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column
}

.glightbox-container .ginner-container.desc-left,
.glightbox-container .ginner-container.desc-right {
   max-width: 100% !important
}

.gslide iframe,
.gslide video {
   outline: 0 !important;
   border: none;
   min-height: 165px;
   -webkit-overflow-scrolling: touch;
   -ms-touch-action: auto;
   touch-action: auto
}

.gslide:not(.current) {
   pointer-events: none
}

.gslide-image {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center
}

.gslide-image img {
   max-height: 100vh;
   display: block;
   padding: 0;
   float: none;
   outline: 0;
   border: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   max-width: 100vw;
   width: auto;
   height: auto;
   -o-object-fit: cover;
   object-fit: cover;
   -ms-touch-action: none;
   touch-action: none;
   margin: auto;
   min-width: 200px
}

.desc-bottom .gslide-image img,
.desc-top .gslide-image img {
   width: auto
}

.desc-left .gslide-image img,
.desc-right .gslide-image img {
   width: auto;
   max-width: 100%
}

.gslide-image img.zoomable {
   position: relative
}

.gslide-image img.dragging {
   cursor: -webkit-grabbing !important;
   cursor: grabbing !important;
   -webkit-transition: none;
   transition: none
}

.gslide-video {
   position: relative;
   max-width: 100vh;
   width: 100% !important
}

.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
   display: none
}

.gslide-video .gvideo-wrapper {
   width: 100%;
   margin: auto
}

.gslide-video:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: #ff000057;
   display: none
}

.gslide-video.playing:before {
   display: none
}

.gslide-video.fullscreen {
   max-width: 100% !important;
   min-width: 100%;
   height: 75vh
}

.gslide-video.fullscreen video {
   max-width: 100% !important;
   width: 100% !important
}

.gslide-inline {
   background: #fff;
   text-align: left;
   max-height: calc(100vh - 40px);
   overflow: auto;
   max-width: 100%;
   margin: auto
}

.gslide-inline .ginlined-content {
   padding: 20px;
   width: 100%
}

.gslide-inline .dragging {
   cursor: -webkit-grabbing !important;
   cursor: grabbing !important;
   -webkit-transition: none;
   transition: none
}

.ginlined-content {
   overflow: auto;
   display: block !important;
   opacity: 1
}

.gslide-external {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   min-width: 100%;
   background: #fff;
   padding: 0;
   overflow: auto;
   max-height: 75vh;
   height: 100%
}

.gslide-media {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto
}

.zoomed .gslide-media {
   -webkit-box-shadow: none !important;
   box-shadow: none !important
}

.desc-bottom .gslide-media,
.desc-top .gslide-media {
   margin: 0 auto;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column
}

.gslide-description {
   position: relative;
   -webkit-box-flex: 1;
   -ms-flex: 1 0 100%;
   flex: 1 0 100%
}

.gslide-description.description-left,
.gslide-description.description-right {
   max-width: 100%
}

.gslide-description.description-bottom,
.gslide-description.description-top {
   margin: 0 auto;
   width: 100%
}

.gslide-description p {
   margin-bottom: 12px
}

.gslide-description p:last-child {
   margin-bottom: 0
}

.zoomed .gslide-description,
.glightbox-button-hidden {
   display: none
}

.glightbox-mobile .glightbox-container .gslide-description {
   height: auto !important;
   width: 100%;
   position: absolute;
   bottom: 0;
   padding: 19px 11px 50px;
   max-width: 100vw !important;
   -webkit-box-ordinal-group: 3 !important;
   -ms-flex-order: 2 !important;
   order: 2 !important;
   max-height: 78vh;
   overflow: auto !important;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .75)));
   background: linear-gradient(to bottom, #0000 0, #000000bf);
   -webkit-transition: opacity .3s linear;
   transition: opacity .3s linear
}

.glightbox-mobile .glightbox-container .gslide-title {
   color: #fff;
   font-size: 1em
}

.glightbox-mobile .glightbox-container .gslide-desc {
   color: #a1a1a1
}

.glightbox-mobile .glightbox-container .gslide-desc a {
   color: #fff;
   font-weight: 700
}

.glightbox-mobile .glightbox-container .gslide-desc * {
   color: inherit
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
   color: #fff;
   opacity: .4
}

.gdesc-open .gslide-media {
   -webkit-transition: opacity .5s ease;
   transition: opacity .5s ease;
   opacity: .4
}

.gdesc-open .gdesc-inner {
   padding-bottom: 30px
}

.gdesc-closed .gslide-media {
   -webkit-transition: opacity .5s ease;
   transition: opacity .5s ease;
   opacity: 1
}

.greset {
   -webkit-transition: all .3s ease;
   transition: all .3s ease
}

.gabsolute {
   position: absolute
}

.grelative {
   position: relative
}

.glightbox-desc {
   display: none !important
}

.glightbox-open {
   overflow: hidden
}

.gloader {
   height: 25px;
   width: 25px;
   -webkit-animation: lightboxLoader .8s infinite linear;
   animation: lightboxLoader .8s infinite linear;
   border: 2px solid #fff;
   border-right-color: transparent;
   border-radius: 50%;
   position: absolute;
   display: block;
   z-index: 9999;
   left: 0;
   right: 0;
   margin: 0 auto;
   top: 47%
}

.goverlay {
   width: 100%;
   height: calc(100vh + 1px);
   position: fixed;
   top: -1px;
   left: 0;
   background: #000;
   will-change: opacity
}

.glightbox-mobile .goverlay {
   background: #000
}

.gclose,
.gnext,
.gprev {
   z-index: 99999;
   cursor: pointer;
   width: 26px;
   height: 44px;
   border: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column
}

.gclose svg,
.gnext svg,
.gprev svg {
   display: block;
   width: 25px;
   height: auto;
   margin: 0;
   padding: 0
}

.gclose.disabled,
.gnext.disabled,
.gprev.disabled {
   opacity: .1
}

.gclose .garrow,
.gnext .garrow,
.gprev .garrow {
   stroke: #fff
}

.gbtn.focused {
   outline: 2px solid #0f3d81
}

iframe.wait-autoplay {
   opacity: 0
}

.glightbox-closing .gclose,
.glightbox-closing .gnext,
.glightbox-closing .gprev {
   opacity: 0 !important
}

.glightbox-clean .gslide-description {
   background: #fff
}

.glightbox-clean .gdesc-inner {
   padding: 22px 20px
}

.glightbox-clean .gslide-title {
   font-size: 1em;
   font-weight: 400;
   font-family: arial;
   color: #000;
   margin-bottom: 19px;
   line-height: 1.4em
}

.glightbox-clean .gslide-desc {
   font-size: .86em;
   margin-bottom: 0;
   font-family: arial;
   line-height: 1.4em
}

.glightbox-clean .gslide-video {
   background: #000
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
   background-color: #000000bf;
   border-radius: 4px
}

.glightbox-clean .gclose path,
.glightbox-clean .gnext path,
.glightbox-clean .gprev path {
   fill: #fff
}

.glightbox-clean .gprev {
   position: absolute;
   top: -100%;
   left: 30px;
   width: 40px;
   height: 50px
}

.glightbox-clean .gnext {
   position: absolute;
   top: -100%;
   right: 30px;
   width: 40px;
   height: 50px
}

.glightbox-clean .gclose {
   width: 35px;
   height: 35px;
   top: 15px;
   right: 10px;
   position: absolute
}

.glightbox-clean .gclose svg {
   width: 18px;
   height: auto
}

.glightbox-clean .gclose:hover {
   opacity: 1
}

.gfadeIn {
   -webkit-animation: gfadeIn .5s ease;
   animation: gfadeIn .5s ease
}

.gfadeOut {
   -webkit-animation: gfadeOut .5s ease;
   animation: gfadeOut .5s ease
}

.gslideOutLeft {
   -webkit-animation: gslideOutLeft .3s ease;
   animation: gslideOutLeft .3s ease
}

.gslideInLeft {
   -webkit-animation: gslideInLeft .3s ease;
   animation: gslideInLeft .3s ease
}

.gslideOutRight {
   -webkit-animation: gslideOutRight .3s ease;
   animation: gslideOutRight .3s ease
}

.gslideInRight {
   -webkit-animation: gslideInRight .3s ease;
   animation: gslideInRight .3s ease
}

.gzoomIn {
   -webkit-animation: gzoomIn .5s ease;
   animation: gzoomIn .5s ease
}

.gzoomOut {
   -webkit-animation: gzoomOut .5s ease;
   animation: gzoomOut .5s ease
}

@-webkit-keyframes lightboxLoader {
   0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
   }

   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
   }
}

@keyframes lightboxLoader {
   0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
   }

   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
   }
}

@-webkit-keyframes gfadeIn {
   0% {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes gfadeIn {
   0% {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@-webkit-keyframes gfadeOut {
   0% {
      opacity: 1
   }

   to {
      opacity: 0
   }
}

@keyframes gfadeOut {
   0% {
      opacity: 1
   }

   to {
      opacity: 0
   }
}

@-webkit-keyframes gslideInLeft {
   0% {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0)
   }

   to {
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0);
      opacity: 1
   }
}

@keyframes gslideInLeft {
   0% {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0)
   }

   to {
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0);
      opacity: 1
   }
}

@-webkit-keyframes gslideOutLeft {
   0% {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0)
   }

   to {
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0);
      opacity: 0;
      visibility: hidden
   }
}

@keyframes gslideOutLeft {
   0% {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0)
   }

   to {
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0);
      opacity: 0;
      visibility: hidden
   }
}

@-webkit-keyframes gslideInRight {
   0% {
      opacity: 0;
      visibility: visible;
      -webkit-transform: translate3d(60%, 0, 0);
      transform: translate3d(60%, 0, 0)
   }

   to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0);
      opacity: 1
   }
}

@keyframes gslideInRight {
   0% {
      opacity: 0;
      visibility: visible;
      -webkit-transform: translate3d(60%, 0, 0);
      transform: translate3d(60%, 0, 0)
   }

   to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0);
      opacity: 1
   }
}

@-webkit-keyframes gslideOutRight {
   0% {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0)
   }

   to {
      -webkit-transform: translate3d(60%, 0, 0);
      transform: translate3d(60%, 0, 0);
      opacity: 0
   }
}

@keyframes gslideOutRight {
   0% {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translateZ(0)
   }

   to {
      -webkit-transform: translate3d(60%, 0, 0);
      transform: translate3d(60%, 0, 0);
      opacity: 0
   }
}

@-webkit-keyframes gzoomIn {
   0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
   }

   to {
      opacity: 1
   }
}

@keyframes gzoomIn {
   0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
   }

   to {
      opacity: 1
   }
}

@-webkit-keyframes gzoomOut {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
   }

   to {
      opacity: 0
   }
}

@keyframes gzoomOut {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
   }

   to {
      opacity: 0
   }
}

@media (min-width:769px) {
   .glightbox-container .ginner-container {
      width: auto;
      height: auto;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row
   }

   .glightbox-container .ginner-container.desc-top .gslide-description {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0
   }

   .glightbox-container .ginner-container.desc-top .gslide-image,
   .glightbox-container .ginner-container.desc-top .gslide-image img {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1
   }

   .glightbox-container .ginner-container.desc-left .gslide-description {
      -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
      order: 0
   }

   .glightbox-container .ginner-container.desc-left .gslide-image {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1
   }

   .gslide-image img {
      max-height: 97vh;
      max-width: 100%
   }

   .gslide-image img.zoomable {
      cursor: -webkit-zoom-in;
      cursor: zoom-in
   }

   .zoomed .gslide-image img.zoomable {
      cursor: -webkit-grab;
      cursor: grab
   }

   .gslide-inline {
      max-height: 95vh
   }

   .gslide-external {
      max-height: 100vh
   }

   .gslide-description.description-left,
   .gslide-description.description-right {
      max-width: 275px
   }

   .glightbox-open {
      height: auto
   }

   .goverlay {
      background: #000000eb
   }

   .glightbox-clean .gslide-media {
      -webkit-box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, .65);
      box-shadow: 1px 2px 9px #000000a6
   }

   .glightbox-clean .description-left .gdesc-inner,
   .glightbox-clean .description-right .gdesc-inner {
      position: absolute;
      height: 100%;
      overflow-y: auto
   }

   .glightbox-clean .gclose,
   .glightbox-clean .gnext,
   .glightbox-clean .gprev {
      background-color: #00000052
   }

   .glightbox-clean .gclose:hover,
   .glightbox-clean .gnext:hover,
   .glightbox-clean .gprev:hover {
      background-color: #000000b3
   }

   .glightbox-clean .gprev,
   .glightbox-clean .gnext {
      top: 45%
   }
}

@media (min-width:992px) {
   .glightbox-clean .gclose {
      opacity: .7;
      right: 20px
   }
}

@media screen and (max-height:420px) {
   .goverlay {
      background: #000
   }
}

[data-reader] {
   overflow: hidden !important;
   position: absolute;
   width: 1px !important;
   height: 1px !important;
   margin: -1px !important;
   padding: 0 !important;
   white-space: nowrap !important;
   font-size: 0 !important;
   border: 0 !important;
   clip: rect(0, 0, 0, 0) !important
}

.block-link {
   position: absolute;
   font-size: 0
}

.block-link:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 200;
   background: transparent;
   pointer-events: auto
}

.underline,
.crumbs-nav__link,
.wysiwyg a {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-thickness: .077em;
   text-underline-offset: .144em;
   text-decoration-color: transparent
}

.is-hide {
   visibility: hidden !important;
   width: 0 !important;
   height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   font-size: 0 !important
}

.is-lock {
   overflow: hidden !important
}

body.is-lock {
   position: fixed;
   width: 100%
}

:root {
   --appMaxWidth: 1600px;
   --appGrid_Base: repeat(4, 1fr);
   --appGrid_Lite: repeat(8, 1fr);
   --appGrid_Full: repeat(12, 1fr);
   --gapsCol_Mini: 12px;
   --gapsCol_Base: 20px;
   --gapsCol_Plus: 40px;
   --gapsCol_Mega: 80px;
   --gapsRow_Mini: 20px;
   --gapsRow_Base: 20px;
   --gapsRow_Plus: 40px;
   --gapsRow_Mega: 60px;
   --fontFamily_Main: "JetBrains Mono", sans-serif;
   --fontFamily_Extra: "Kode Mono", sans-serif;
   --fontFamily_Code: "JetBrains Mono", monospace;
   --lineHeight_Main: 1.7;
   --lineHeight_H1: 1.25;
   --lineHeight_Hx: 1.4;
   --textMargin_Base: 1.051rem;
   --textMargin_Mini: .65rem;
   --textMargin_Plus: 2.102rem;
   --textMargin_Wide: 3.153rem;
   --textMargin_Mega: 4.204rem;
   --fontSize_Main: 15px;
   --fontSize_Menu: 15px;
   --fontSize_H1: clamp(35px, 3.5vw, 45px);
   --fontSize_H2: clamp(25px, 2.5vw, 31px);
   --fontSize_H3: clamp(20px, 2vw, 23px);
   --fontSize_H4: clamp(15px, 1.5vw, 17px);
   --fontSize_Hint: 13px;
   --fontSize_Desc: 17px;
   --fontSize_Spec: clamp(18px, 1.8vw, 22px);
   --fontWeight_Main: 400;
   --fontWeight_Bold: 700;
   --fontWeight_Spec: 0;
   --letterSpacing_Main: .05em;
   --letterSpacing_Hx: 0;
   --colorBlack: #000000;
   --colorWhite: #ffffff;
   --colorSelection: rgba(113, 25, 231, .35);
   --colorOnlay: rgba(0, 0, 0, .45);
   --colorText: #b3b3ba;
   --colorTitle: #e2e2ea;
   --colorSpec: #f8f8ff;
   --colorGray_02: rgba(245, 245, 248, .035);
   --colorGray_05: rgba(245, 245, 248, .085);
   --colorGray_10: rgba(245, 245, 248, .175);
   --colorGray_20: rgba(245, 245, 248, .25);
   --colorGray_25: rgba(245, 245, 248, .3);
   --colorGray_30: #bfbfc7;
   --colorGray_40: #a9a9b0;
   --colorGray_50: #545457;
   --colorGray_60: #272729;
   --colorGray_65: rgba(0, 0, 3, .22);
   --colorGray_70: rgba(0, 0, 3, .65);
   --colorGray_80: #080809;
   --colorAccent: #7119e7;
   --colorAccent_Hero: rgba(113, 25, 231, .075);
   --colorAccent_Dark: rgba(113, 25, 231, .4);
   --colorAccent_Glow: rgba(113, 25, 231, .65);
   --colorInvert: #8de617;
   --colorInvert_Dark: rgba(141, 230, 23, .4);
   --colorInvert_Glow: rgba(141, 230, 23, .65);
   --colorNotes: #f7064f;
   --colorNotes_Dark: rgba(247, 6, 79, .4);
   --colorNotes_Glow: rgba(247, 6, 79, .65);
   --colorNotify: #ffe906;
   --colorNotify_Dark: rgba(255, 233, 6, .4);
   --colorNotify_Glow: rgba(255, 233, 6, .65);
   --colorSpecial: #ff9506;
   --colorSpecial_Dark: rgba(255, 149, 6, .4);
   --colorSpecial_Glow: rgba(255, 149, 6, .65);
   --colorProjects: #148ae4;
   --colorProjects_Dark: rgba(20, 138, 228, .4);
   --colorProjects_Glow: rgba(20, 138, 228, .65);
   --buttonSize_Base: 40px;
   --buttonSize_Mini: 33px;
   --buttonSize_Plus: 48px;
   --inputSize_Base: 40px;
   --inputSize_Mini: 32px;
   --inputSize_Plus: 52px;
   --checkSize_Base: 16px;
   --checkSize_Plus: 20px;
   --borderRadius_Base: 1px;
   --borderRadius_Mini: 0;
   --borderRadius_Plus: 0;
   --transition_Base: all .3s;
   --transition_Text: all .15s
}

*,
*:before,
*:after {
   box-sizing: border-box
}

html {
   line-height: var(--lineHeight_Main);
   -webkit-text-size-adjust: 100%
}

body {
   margin: 0;
   font-family: var(--fontFamily_Main);
   font-size: var(--fontSize_Main);
   font-weight: var(--fontWeight_Main);
   color: var(--colorText);
   letter-spacing: var(--letterSpacing_Main);
   background: var(--colorBlack);
   -webkit-tap-highlight-color: transparent
}

*:focus-visible {
   outline: 2px solid var(--colorSelection);
   outline-offset: 2px
}

*:focus:not(:focus-visible) {
   outline: none
}

::selection,
::moz-selection {
   color: var(--colorWhite);
   text-shadow: none;
   background: var(--colorSelection)
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--fontFamily_Main);
   margin: 0;
   text-rendering: optimizeLegibility
}

p {
   margin: 0
}

ul,
ol {
   margin: 0;
   padding: 0;
   list-style: none
}

hr {
   margin: 0;
   border: 0
}

a {
   color: inherit;
   text-decoration: none;
   text-decoration-skip: edges;
   cursor: default
}

b,
strong {
   font-weight: var(--fontWeight_Bold)
}

i,
em {
   font-style: normal
}

sup,
sub {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
   font-size: 75%
}

sup {
   top: -.5em
}

sub {
   bottom: -.25em
}

small {
   font-size: 1em
}

mark {
   background: transparent
}

abbr[title] {
   text-decoration: underline;
   text-decoration-style: dotted
}

pre,
code,
kbd,
samp {
   font-family: var(--fontFamily_Code);
   font-size: 1em
}

pre {
   margin: 0
}

img {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover
}

iframe {
   border: 0
}

video {
   outline: 0
}

input,
textarea {
   letter-spacing: inherit;
   border-width: 0;
   outline: 0
}

input::placeholder,
textarea::placeholder {
   opacity: 1
}

button {
   padding: 0;
   background: transparent;
   border: 0
}

button,
input[type=button],
input[type=submit] {
   letter-spacing: inherit
}

button,
input,
optgroup,
select,
textarea {
   margin: 0;
   line-height: var(--lineHeight_Main);
   font-family: inherit;
   font-size: 1em
}

button,
[type=button],
[type=reset],
[type=submit] {
   padding: 0
}

[type=button],
select {
   border: 0
}

fieldset,
legend {
   padding: 0
}

progress {
   vertical-align: baseline
}

textarea {
   resize: vertical
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
   height: auto
}

::-webkit-file-upload-button {
   font: inherit
}

summary {
   display: list-item
}

*:disabled {
   opacity: .5;
   cursor: not-allowed
}

.xnode {
   display: grid;
   grid-template-rows: auto 1fr auto;
   align-content: space-between;
   min-width: 320px;
   min-height: 100vh
}

.xnode__onlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2000;
   display: none;
   background: var(--colorOnlay);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

.xnode__onlay.is-on {
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .5s
}

.xnode__onlay.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .4s
}

.xnode__leads {
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

@media (min-width: 1340px) {
   .anim-hero .xnode__leads {
      overflow: hidden
   }
}

.xnode__main {
   z-index: 100;
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   row-gap: clamp(88px, 8.8vw, 112px)
}

.xnode__main.mod-spec {
   padding: 0
}

.xnode__extra {
   z-index: 100;
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

.navbar {
   z-index: 200;
   grid-column: wide;
   transition: var(--transition_Base)
}

@media screen and (min-width: 1660px) and (hover: hover) {
   .navbar:hover {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
   }
}

@media (min-width: 1660px) {

   .navbar:focus,
   .navbar:active {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
   }
}

.navbar.mod-spec .navbar__block {
   border-bottom: 1px solid var(--colorGray_05)
}

.navbar__main {
   grid-column: main;
   display: flex;
   padding: 20px 0;
   column-gap: var(--gapsCol_Base)
}

.navbar__main .global-nav {
   margin-left: auto
}

@media (min-width: 480px) {
   .navbar__main .global-nav {
      margin-right: -20px
   }
}

@media (min-width: 480px) {

   .navbar__main .lang-toggle,
   .navbar__main .hero-order {
      padding-left: clamp(36px, 4.73vw, 64px)
   }
}

.navbar__fast {
   position: relative;
   grid-column: main;
   padding: 0 1px
}

.navbar__fast:before,
.navbar__fast:after {
   content: "";
   position: absolute;
   top: 8px;
   bottom: 8px;
   display: flex;
   width: 1px;
   background: var(--colorGray_05)
}

.navbar__fast:before {
   left: 0
}

.navbar__fast:after {
   right: 0
}

.cluster {
   display: grid;
   grid-column: main;
   column-gap: var(--gapsCol_Base);
   row-gap: var(--textMargin_Mega)
}

@media (min-width: 1000px) {
   .cluster {
      grid-template-columns: repeat(8, 1fr)
   }
}

@media (min-width: 1340px) {
   .cluster {
      grid-template-columns: repeat(12, 1fr)
   }
}

.cluster__main {
   position: relative;
   z-index: 10;
   display: grid
}

@media (min-width: 480px) {
   .cluster__main {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .cluster__main {
      grid-column: 1/span 6;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .cluster__main {
      grid-column: 4/span 6;
      grid-row: 1;
      padding: 0
   }
}

.cluster__aside {
   display: grid;
   grid-row: 1;
   align-items: flex-start;
   column-gap: var(--gapsRow_Base);
   row-gap: var(--gapsRow_Base)
}

@media (min-width: 480px) {
   .cluster__aside {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .cluster__aside {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (min-width: 1000px) {
   .cluster__aside {
      grid-column: 7/span 2;
      grid-template-columns: repeat(1, 1fr);
      padding: 0
   }
}

@media (min-width: 1340px) {
   .cluster__aside {
      grid-column: 1/span 3
   }
}

@media (min-width: 1000px) {
   .cluster.mod-wide .cluster__main {
      grid-column: 1/span 7
   }
}

@media (min-width: 1340px) {
   .cluster.mod-wide .cluster__main {
      grid-column: 3/span 8
   }
}

@media (min-width: 1340px) {
   .cluster.mod-item .cluster__main {
      grid-column: 4/span 9
   }
}

.module-base {
   grid-column: main;
   display: flex;
   flex-direction: column
}

.module-grid {
   grid-column: main;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .module-grid {
      grid-template-columns: repeat(8, 1fr)
   }
}

@media (min-width: 1340px) {
   .module-grid {
      grid-template-columns: repeat(12, 1fr)
   }
}

.module-spec {
   grid-column: wide
}

.section {
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   padding: 0 clamp(16px, 4.175vw, 32px)
}

.section-grid {
   display: grid;
   grid-column: wide;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   background-size: cover;
   background-repeat: no-repeat;
   padding: 0 clamp(16px, 4.175vw, 32px)
}

@media screen and (hover: hover) {

   .section-grid:hover .header__title:before,
   .section-grid:hover .header__title:after {
      color: var(--colorAccent)
   }
}

.section-fluid {
   display: grid;
   grid-column: wide;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

.section-grid.mod-hero {
   overflow: hidden
}

.section-grid.mod-hero:before,
.section-grid.mod-hero:after {
   content: "";
   position: absolute;
   top: -80px;
   right: 0;
   left: 0;
   height: 980px
}

@media (min-width: 1340px) {

   .section-grid.mod-hero:before,
   .section-grid.mod-hero:after {
      height: 980px
   }
}

.section-grid.mod-hero:before {
   z-index: 10;
   animation: colorLoading 1s forwards 3s;
   background: radial-gradient(circle at 120% 60%, rgba(113, 25, 231, .15) 0%, var(--colorBlack) 75%);
   opacity: 0
}

@media (min-width: 1000px) {
   .section-grid.mod-hero:before {
      background: radial-gradient(circle at 110% 70%, rgba(113, 25, 231, .15) 0%, var(--colorBlack) 75%)
   }
}

@media (min-width: 1340px) {
   .section-grid.mod-hero:before {
      background: radial-gradient(circle at 130% 90%, rgba(113, 25, 231, .2) 0%, var(--colorBlack) 75%);
      animation-delay: 4.5s
   }
}

.section-grid.mod-hero:after {
   z-index: 30;
   background: linear-gradient(0deg, var(--colorBlack) 0%, rgba(0, 0, 0, .5) 5%, transparent 50%, rgba(0, 0, 0, .5) 95%, var(--colorBlack) 100%), linear-gradient(335deg, transparent 25%, var(--colorAccent_Hero))
}

@media (min-width: 1340px) {
   .section-grid.mod-hero:after {
      background: linear-gradient(335deg, transparent 25%, var(--colorAccent_Hero)), linear-gradient(0deg, var(--colorBlack) 25%, transparent 50%, var(--colorBlack) 75%)
   }
}

.section-grid.mod-order {
   position: relative;
   grid-column: wide;
   background: linear-gradient(0deg, rgba(113, 25, 231, .125), transparent)
}

.section.mod-glow {
   position: relative;
   grid-column: wide;
   border-top: 1px solid var(--colorAccent_Dark)
}

.section.mod-glow:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 20;
   width: 60%;
   height: 1px;
   background: linear-gradient(90deg, rgba(113, 25, 231, .35), transparent);
   animation: glowPulse 9s linear infinite
}

@font-face {
   src: url(./kode-mono_bold-Cja-YST5.woff2) format("woff2");
   font-display: swap;
   font-family: Kode Mono;
   font-weight: 700;
   font-style: normal
}

@font-face {
   src: url(./jetbrains-mono-DXueYKLp.woff2) format("woff2");
   font-display: swap;
   font-family: JetBrains Mono;
   font-weight: 400;
   font-style: normal
}

@font-face {
   src: url(./jetbrains-mono_bold-WHotm33_.woff2) format("woff2");
   font-display: swap;
   font-family: JetBrains Mono;
   font-weight: 700;
   font-style: normal
}

.hystmodal {
   z-index: 1000 !important
}

.hystmodal:before {
   background: var(--colorOnlay);
   opacity: 1;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px)
}

.wysiwyg>*:first-child {
   margin-top: 0
}

.wysiwyg section *:first-child {
   margin-top: 0
}

.wysiwyg section {
   margin-top: var(--textMargin_Mega)
}

.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4 {
   line-height: var(--lineHeight_Hx);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorTitle);
   text-transform: uppercase
}

.wysiwyg h2 {
   margin-top: var(--textMargin_Plus);
   font-size: var(--fontSize_H2)
}

.wysiwyg h2+h3 {
   margin-top: var(--textMargin_Base)
}

.wysiwyg h2:before {
   content: "#";
   margin-right: .6em;
   color: var(--colorAccent)
}

@media (min-width: 1340px) {
   .wysiwyg h2:before {
      color: var(--colorGray_10)
   }
}

@media (min-width: 480px) {
   .wysiwyg h2:before {
      margin-left: -1.25em
   }
}

.wysiwyg h3 {
   margin-top: var(--textMargin_Plus);
   font-size: var(--fontSize_H3);
   text-transform: lowercase
}

.wysiwyg h3+h4 {
   margin-top: var(--textMargin_Base)
}

.wysiwyg h3+ul,
.wysiwyg h3+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg p+.wysiwyg p {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg p+ul,
.wysiwyg p+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p>img {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p>iframe {
   width: 100%;
   margin-top: var(--textMargin_Base);
   margin-bottom: var(--textMargin_Mini)
}

.wysiwyg i,
.wysiwyg em {
   font-style: italic
}

.wysiwyg b,
.wysiwyg strong {
   font-weight: var(--fontWeight_Main);
   color: var(--colorInvert)
}

.wysiwyg ul,
.wysiwyg ol {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg ul+p,
.wysiwyg ul+ul,
.wysiwyg ul+ol,
.wysiwyg ol+p,
.wysiwyg ol+ul,
.wysiwyg ol+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg ul>li,
.wysiwyg ol>li {
   position: relative;
   margin-top: var(--textMargin_Mini);
   padding-left: 1.95em
}

.wysiwyg ul>li ul,
.wysiwyg ol>li ul {
   margin-top: var(--textMargin_Mini)
}

.wysiwyg ul li:before,
.wysiwyg ol li:before {
   position: absolute;
   top: 0;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorGray_50)
}

.wysiwyg ul li:before {
   content: "-";
   left: 0;
   font-size: 1em
}

.wysiwyg ol {
   counter-reset: myCounter
}

.wysiwyg ol li:before {
   counter-increment: myCounter;
   content: counter(myCounter) ".";
   left: .05em;
   color: var(--colorGray_50)
}

.wysiwyg blockquote {
   margin: 1.4rem 0 1.4rem 2px;
   padding: 1.4rem 20px 1.4rem 24px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H3);
   font-style: italic;
   background: var(--colorGray_03);
   border-left: 3px solid var(--colorAccent_Light);
   border-radius: var(--borderRadius_Mini)
}

.wysiwyg blockquote>*:first-child {
   margin-top: 0
}

.wysiwyg a {
   color: var(--colorAccent);
   text-decoration: underline;
   text-decoration-style: dotted;
   transition: var(--transition_Text);
   cursor: pointer
}

@media screen and (hover: hover) {
   .wysiwyg a:hover {
      color: var(--colorInvert)
   }
}

.wysiwyg a:focus,
.wysiwyg a:active {
   color: var(--colorInvert)
}

.wysiwyg .preform {
   margin-top: var(--textMargin_Plus)
}

[class*=button-] {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   white-space: nowrap;
   line-height: 1;
   font-weight: var(--fontWeight_Bold);
   font-size: var(--fontSize_Main);
   color: var(--colorAccent);
   transition: var(--transition_Base)
}

[class*=button-].mod-plus {
   height: var(--buttonSize_Plus);
   padding-inline: 28px;
   font-size: var(--fontSize_Main);
   border-radius: 6px 0
}

.button-main {
   height: var(--buttonSize_Base);
   padding-inline: 20px;
   text-transform: lowercase;
   border: 1px solid var(--colorAccent);
   border-radius: 4px 0;
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.button-main:before,
.button-main:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 12px;
   height: 12px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.button-main:before {
   top: -6px;
   left: -6px;
   border-right: 1px solid var(--colorAccent)
}

.button-main:after {
   right: -6px;
   bottom: -6px;
   border-left: 1px solid var(--colorAccent)
}

@media screen and (hover: hover) {
   .button-main:hover {
      color: var(--colorWhite);
      background: var(--colorAccent)
   }
}

.button-main:focus,
.button-main:active {
   color: var(--colorWhite);
   background: var(--colorAccent)
}

.button-extra {
   height: var(--buttonSize_Base);
   padding-top: 2px;
   color: var(--colorWhite);
   text-transform: uppercase;
   background: var(--colorNotes)
}

.button-extra:before,
.button-extra:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 14px;
   height: 14px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.button-extra:before {
   top: -7px;
   left: -7px
}

.button-extra:after {
   right: -7px;
   bottom: -7px
}

@media screen and (hover: hover) {
   .button-extra:hover {
      background: var(--colorSpecial)
   }
}

.button-extra:focus,
.button-extra:active {
   background: var(--colorSpecial)
}

.check {
   position: relative;
   display: inline-flex
}

@media screen and (hover: hover) {
   .check:hover .check__input:not([disabled])~.check__title {
      color: var(--colorAccent)
   }

   .check:hover .check__input:not([disabled])~.check__title:before {
      border-color: var(--colorAccent)
   }

   .check:hover .check__input:not([disabled])~.check__title:after {
      color: var(--colorText)
   }

   .check:hover .check__input:not([disabled]):checked~.check__title:before {
      border-color: var(--colorAccent)
   }
}

.check:focus .check__input:not([disabled])~.check__title,
.check:active .check__input:not([disabled])~.check__title {
   color: var(--colorAccent)
}

.check:focus .check__input:not([disabled])~.check__title:before,
.check:active .check__input:not([disabled])~.check__title:before {
   border-color: var(--colorAccent)
}

.check:focus .check__input:not([disabled])~.check__title:after,
.check:active .check__input:not([disabled])~.check__title:after {
   color: var(--colorText)
}

.check:focus .check__input:not([disabled]):checked~.check__title:before,
.check:active .check__input:not([disabled]):checked~.check__title:before {
   border-color: var(--colorAccent)
}

.check__title {
   position: relative;
   display: flex;
   min-height: var(--checkSize_Base);
   padding-left: calc(var(--checkSize_Base) + 12px);
   font-family: var(--fontFamily_Main);
   color: var(--colorTitle);
   transition: var(--transition_Text)
}

.check__title:before,
.check__title:after {
   content: "";
   position: absolute;
   top: 2px;
   left: 0;
   display: flex;
   width: var(--checkSize_Base);
   height: var(--checkSize_Base);
   transition: var(--transition_Text)
}

.check__title:before {
   background: var(--colorWhite);
   border: 1px solid var(--colorGray_04);
   border-radius: var(--borderRadius_Mini)
}

.check__title:after {
   text-align: center
}

.check__input {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -10;
   opacity: 0
}

.check__input:checked+.check__title:before {
   border-color: var(--colorAccent)
}

.check__input:checked+.check__title:after {
   top: 3px;
   left: 2px;
   width: var(--checkSize_Base);
   height: var(--checkSize_Base);
   background-size: 12px 12px;
   background-position: center;
   background-repeat: no-repeat
}

.check__input:disabled~.check__title {
   opacity: .5
}

@keyframes colorLoading {
   0% {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes colorLoading_Accent {
   0% {
      color: var(--colorGray_50);
      fill: var(--colorGray_50)
   }

   to {
      color: var(--colorAccent);
      fill: var(--colorAccent)
   }
}

@keyframes elementRotate {
   0% {
      transform: rotate(0)
   }

   97% {
      transform: rotate(0)
   }

   to {
      transform: rotate(60deg)
   }
}

@keyframes elementRotate_Quarter {
   0% {
      transform: rotate(0)
   }

   97% {
      transform: rotate(0)
   }

   to {
      transform: rotate(90deg)
   }
}

@keyframes glowPulse {
   0% {
      box-shadow: 0 0 7px 1px #7119e71a
   }

   50% {
      box-shadow: 0 0 7px 1px #7119e759
   }

   to {
      box-shadow: 0 0 7px 1px #7119e71a
   }
}

@keyframes onlayLayer_On {
   0% {
      opacity: 0;
      transform: translate(-150vw)
   }

   1% {
      opacity: 0;
      transform: translate(0)
   }

   to {
      opacity: 1
   }
}

@keyframes onlayLayer_Off {
   0% {
      opacity: 1
   }

   99% {
      opacity: 0;
      transform: translate(0)
   }

   to {
      opacity: 0;
      transform: translate(-150vw)
   }
}

@keyframes textCaretFade {
   0% {
      color: var(--colorBlack);
      opacity: 0
   }

   9.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2.5em var(--colorAccent);
      opacity: 1
   }

   15.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2.5em var(--colorAccent);
      opacity: 1
   }

   25% {
      color: var(--colorBlack);
      opacity: 0
   }

   34.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2.5em var(--colorNotes);
      opacity: 1
   }

   40.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2.5em var(--colorNotes);
      opacity: 1
   }

   50% {
      color: var(--colorBlack);
      opacity: 0
   }

   59.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2.5em var(--colorInvert);
      opacity: 1
   }

   65.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2.5em var(--colorInvert);
      opacity: 1
   }

   75% {
      color: var(--colorBlack);
      opacity: 0
   }

   84.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2.5em var(--colorProjects);
      opacity: 1
   }

   90.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2.5em var(--colorProjects);
      opacity: 1
   }

   to {
      color: var(--colorBlack);
      opacity: 0
   }
}

@keyframes textColorSwitch {
   0% {
      color: var(--colorGray_50)
   }

   12.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2em var(--colorAccent)
   }

   37.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2em var(--colorNotes)
   }

   62.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2em var(--colorInvert)
   }

   87.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2em var(--colorProjects)
   }

   to {
      color: var(--colorGray_50)
   }
}

@keyframes textColorSwitch_Accent {
   0% {
      color: var(--colorGray_10)
   }

   to {
      color: var(--colorAccent);
      text-shadow: 0 0 2em var(--colorAccent)
   }
}

@keyframes unrealLogo_Stroke {
   0% {
      stroke: var(--colorBlack)
   }

   to {
      stroke: var(--colorAccent)
   }
}

@keyframes unrealLogo_Glow {
   0% {
      filter: drop-shadow(0 0 0 var(--colorAccent))
   }

   to {
      filter: drop-shadow(0 0 7px var(--colorAccent))
   }
}

.header {
   display: flex;
   flex-direction: column;
   row-gap: 20px
}

.header__title {
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H2);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   letter-spacing: var(--letterSpacing_Hx);
   text-transform: uppercase
}

.header__title:before,
.header__title:after {
   display: inline-flex;
   color: var(--colorGray_10);
   transition: var(--transition_Base)
}

@media (min-width: 480px) {
   .header__title:before {
      content: "#";
      margin: 0 .5em 0 -1.1em
   }
}

.header__title:after {
   content: "/";
   margin-left: .5em
}

.header__desc {
   display: flex;
   flex-direction: column;
   gap: 1em
}

[class*=icon-] {
   display: inline-flex;
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   font-size: var(--fontSize_Main);
   background-size: 24px;
   background-repeat: no-repeat;
   background-position: center;
   -webkit-mask-size: contain;
   mask-size: contain
}

.icon-close {
   background-image: url(./close-DPQBEXf-.svg)
}

.icon-menu {
   background-image: url(./menu-BIu-pMlw.svg)
}

.icon-plus {
   background-image: url(./plus-B5d3UoCH.svg)
}

.icon-zoom-up {
   background-image: url(./zoom-up-Bm2NItZt.svg)
}

.icon-telegram {
   background-image: url(./telegram-BSwOVQq4.svg)
}

.icon-email {
   background-image: url(./email-vJf6GdED.svg)
}

.icon-location {
   background-image: url(./location-LC3F_iiX.svg)
}

.icon-schedule {
   background-image: url(./schedule-BpE3kpad.svg)
}

.icon-delivery {
   background-image: url(./delivery-CCCXVVIu.svg)
}

.image {
   background: #0000051a
}

.input {
   display: flex;
   flex-direction: column;
   row-gap: 6px
}

.input__label {
   font-family: var(--fontFamily_Extra);
   font-weight: var(--fontWeight_ExtraBold)
}

.input__main {
   display: inline-flex;
   width: 100%;
   height: var(--inputSize_Base);
   padding: 0 12px;
   white-space: nowrap;
   font-family: var(--fontFamily_Main);
   font-size: var(--fontSize_Main);
   color: var(--colorText);
   background-color: transparent;
   border: 1px solid var(--colorGray_10);
   border-radius: var(--borderRadius_Mini);
   transition: var(--transition_Base)
}

.input__main::placeholder {
   font-size: 0
}

.input__main:focus {
   color: var(--colorText);
   border-color: var(--colorAccent)
}

@media screen and (hover: hover) {
   .input__main:hover {
      border-color: var(--colorAccent)
   }
}

.input__main:active {
   border-color: var(--colorAccent)
}

.input__main[disabled=disabled],
.input__main[disabled] {
   opacity: .5
}

.modal {
   width: 100% !important;
   border-top: 3px solid var(--colorAccent);
   border-radius: var(--borderRadius_Mini)
}

.modal__wrap {
   display: flex;
   flex-direction: column
}

.modal__close {
   position: absolute;
   top: -3px;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   width: var(--buttonSize_Base);
   height: var(--buttonSize_Base);
   background: var(--colorAccent);
   border-radius: 0 var(--borderRadius_Mini) 0 var(--borderRadius_Mini);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .modal__close:hover {
      background: var(--colorAccent-hover)
   }
}

.modal__close:focus,
.modal__close:active {
   background: var(--colorAccent-hover)
}

.modal__close svg {
   width: 26px;
   height: 26px
}

.modal__header {
   margin-bottom: 36px
}

.modal__title {
   font-family: var(--fontFamily_Main);
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H3);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorTitle);
   text-transform: uppercase
}

.modal__desc {
   margin-top: 12px
}

.modal__content {
   overflow: hidden;
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   row-gap: 20px;
   border-radius: var(--borderRadius_Base)
}

.modal__item {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   justify-content: flex-end;
   row-gap: 8px
}

.modal__item:last-of-type {
   margin-top: 8px;
   padding-top: 28px;
   border-top: 1px dashed var(--colorGray_50)
}

.modal__label {
   height: 20px;
   font-weight: var(--fontWeight_Bold);
   font-size: var(--fontSize_Hint);
   cursor: text;
   transition: var(--transition_Base)
}

.modal__action {
   width: 144px
}

.modal__hint {
   margin-top: 12px;
   font-size: var(--fontSize_Hint);
   color: var(--colorGray_20)
}

.preform {
   position: relative;
   display: grid;
   min-width: 0;
   border: 1px dashed var(--colorAccent_Dark)
}

@media (min-width: 1660px) {
   .preform {
      padding-top: 26px
   }
}

.preform:before,
.preform:after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 32px
}

.preform:before {
   left: 0;
   background: linear-gradient(90deg, var(--colorBlack), transparent)
}

.preform:after {
   right: 0;
   background: linear-gradient(90deg, transparent, var(--colorBlack))
}

.preform pre {
   overflow-x: auto;
   padding: 0 24px
}

.preform__hint {
   content: "<- Just scroll ->";
   display: flex;
   justify-content: center;
   width: 100%;
   padding: 12px 0 20px;
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

@media (min-width: 1660px) {
   .preform__hint {
      display: none
   }
}

.core-services {
   row-gap: 40px
}

@media (min-width: 480px) {
   .core-services {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .core-services {
      padding: 0
   }
}

.core-services__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .core-services__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .core-services__header {
      grid-column: 2/span 10
   }
}

.core-services__feed {
   overflow: hidden;
   display: grid;
   grid-column: 1/span 4;
   gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .core-services__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1000px) {
   .core-services__feed {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (min-width: 1340px) {
   .core-services__feed {
      grid-template-columns: repeat(3, 1fr);
      grid-column: 2/span 10
   }
}

.overview {
   display: grid;
   row-gap: var(--textMargin_Mega)
}

.overview__block {
   display: grid;
   row-gap: var(--textMargin_Plus)
}

@media screen and (hover: hover) {

   .overview__block:hover .header__title:before,
   .overview__block:hover .header__title:after {
      color: var(--colorAccent) !important
   }
}

.overview__block:focus .header__title:before,
.overview__block:focus .header__title:after,
.overview__block:active .header__title:before,
.overview__block:active .header__title:after {
   color: var(--colorAccent) !important
}

.overview__item {
   display: flex;
   column-gap: 12px;
   padding: 12px 0;
   border-top: 1px dashed var(--colorGray_05);
   transition: var(--transition_Text)
}

.overview__item:last-child {
   border-bottom: 1px dashed var(--colorGray_05)
}

@media screen and (hover: hover) {
   .overview__item:hover {
      color: var(--colorWhite)
   }

   .overview__item:hover .overview__open {
      background: var(--colorGray_40)
   }
}

.overview__item:focus,
.overview__item:active {
   color: var(--colorWhite)
}

.overview__item:focus .overview__open,
.overview__item:active .overview__open {
   background: var(--colorGray_40)
}

.overview__status {
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   width: 20px
}

.overview__name {
   flex-grow: 1;
   padding-right: 12px
}

.overview__open {
   display: flex;
   flex-shrink: 0;
   width: var(--buttonSize_Base);
   height: var(--buttonSize_Base);
   margin: -7px -6px -8px;
   font-size: 0;
   background: var(--colorGray_50);
   -webkit-mask-size: 24px;
   mask-size: 24px;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   transition: var(--transition_Base)
}

.overview__open.mod-code {
   -webkit-mask-image: url(./preview-DfeT8nqy.svg);
   mask-image: url(./preview-DfeT8nqy.svg)
}

.overview__open.mod-site {
   -webkit-mask-image: url(./global-D31XthiH.svg);
   mask-image: url(./global-D31XthiH.svg)
}

@media screen and (hover: hover) {
   .overview__open:hover {
      background: var(--colorAccent) !important
   }
}

.overview__open:focus,
.overview__open:active {
   background: var(--colorAccent) !important
}

.parts-feed {
   display: grid;
   row-gap: var(--textMargin_Mega)
}

.parts-feed__block {
   display: grid;
   row-gap: var(--textMargin_Plus)
}

@media screen and (hover: hover) {

   .parts-feed__block:hover .header__title:before,
   .parts-feed__block:hover .header__title:after {
      color: var(--colorAccent) !important
   }
}

.parts-feed__block:focus .header__title:before,
.parts-feed__block:focus .header__title:after,
.parts-feed__block:active .header__title:before,
.parts-feed__block:active .header__title:after {
   color: var(--colorAccent) !important
}

.parts-feed__data {
   display: grid
}

.product-page {
   display: grid;
   row-gap: var(--textMargin_Mega)
}

.product-page__block {
   display: grid;
   row-gap: var(--textMargin_Plus)
}

@media screen and (hover: hover) {

   .product-page__block:hover .header__title:before,
   .product-page__block:hover .header__title:after {
      color: var(--colorAccent) !important
   }
}

.product-page__block:focus .header__title:before,
.product-page__block:focus .header__title:after,
.product-page__block:active .header__title:before,
.product-page__block:active .header__title:after {
   color: var(--colorAccent) !important
}

.recent-posts {
   row-gap: 40px
}

@media (min-width: 480px) {
   .recent-posts {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .recent-posts {
      padding: 0
   }
}

.recent-posts__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .recent-posts__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .recent-posts__header {
      grid-column: 2/span 10
   }
}

.recent-posts__feed {
   overflow: hidden;
   display: grid;
   grid-column: 1/span 4;
   gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .recent-posts__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1000px) {
   .recent-posts__feed {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (min-width: 1340px) {
   .recent-posts__feed {
      grid-column: 2/span 10
   }
}

.video-post {
   display: flex;
   flex-direction: column
}

.video-post__main {
   position: relative;
   display: flex;
   width: 100%;
   aspect-ratio: 16/9;
   outline: 1px solid var(--colorAccent_Dark);
   box-shadow: 0 0 280px #7119e740;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__main:hover {
      outline-color: var(--colorAccent);
      box-shadow: 0 0 280px #7119e759
   }
}

.video-post__main:focus,
.video-post__main:active {
   outline-color: var(--colorAccent);
   box-shadow: 0 0 280px #7119e759
}

.video-post__main img {
   width: 100%;
   height: auto
}

.video-post__main iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9
}

.video-post__play {
   position: absolute;
   top: 50%;
   left: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: -28px 0 0 -28px;
   width: var(--buttonSize_Plus);
   height: var(--buttonSize_Plus);
   color: var(--colorInvert);
   background: var(--colorBlack);
   border: 2px solid var(--colorInvert);
   border-radius: 50%;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__play:hover {
      color: var(--colorWhite);
      background: var(--colorInvert)
   }
}

.video-post__play:focus,
.video-post__play:active {
   color: var(--colorWhite);
   background: var(--colorInvert)
}

.video-post__play svg {
   width: 28px;
   height: 28px;
   margin-left: 1px;
   transition: var(--transition_Base)
}

.video-post__desc {
   margin-top: var(--textMargin_Wide)
}

@media (min-width: 480px) {
   .video-post__desc {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .video-post__desc {
      grid-column: 1/span 8;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .video-post__desc {
      padding: 0
   }
}

.video-post__extra {
   display: flex;
   justify-content: center;
   margin-top: var(--textMargin_Wide);
   column-gap: 12px
}

@media (min-width: 480px) {
   .video-post__extra {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .video-post__extra {
      grid-column: 1/span 8;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .video-post__extra {
      padding: 0
   }
}

.video-post__more {
   flex-direction: column;
   align-items: center;
   height: auto;
   padding: 12px 16px 14px;
   row-gap: 6px;
   white-space: wrap;
   line-height: var(--lineHeight_Hx)
}

.video-post__more span {
   display: flex;
   text-transform: uppercase
}

.video-post__more small {
   display: flex;
   font-weight: var(--fontWeight_Main);
   color: var(--colorGray_30);
   text-align: center;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__more:hover small {
      color: var(--colorGray_30)
   }
}

.video-post__more:focus small,
.video-post__more:active small {
   color: var(--colorGray_30)
}

.app-logo {
   flex-shrink: 0
}

.app-logo__main {
   display: flex;
   align-items: center;
   height: var(--buttonSize_Base);
   column-gap: 16px;
   font-family: var(--fontFamily_Extra);
   font-size: 22px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: uppercase;
   letter-spacing: .02em
}

@media screen and (hover: hover) {
   a.app-logo__main:hover .app-logo__image {
      fill: var(--colorInvert) !important
   }
}

a.app-logo__main:focus .app-logo__image,
a.app-logo__main:active .app-logo__image {
   fill: var(--colorInvert) !important
}

.app-logo__image {
   flex-shrink: 0;
   width: 39px;
   height: 39px;
   animation: colorLoading_Accent 1s forwards, elementRotate 12s infinite
}

.app-logo__image path {
   transition: var(--transition_Base)
}

.app-logo__name {
   display: flex
}

.app-logo__name i {
   display: inline-flex;
   margin: -2px -3px 0;
   color: var(--colorInvert)
}

.anim-hero .app-logo__image {
   animation-delay: 2.5s
}

@media (min-width: 1340px) {
   .anim-hero .app-logo__image {
      animation-delay: 3s
   }
}

.app-logo.mod-quarter .app-logo__image {
   animation: colorLoading_Accent 1s forwards, elementRotate_Quarter 12s infinite
}

.app-logo__name.mod-bites i {
   margin: -1px -1px 0 -2px
}

.aside-block {
   overflow: hidden
}

@media (min-width: 1340px) {
   .aside-block {
      padding-right: clamp(72px, 6.83vw, 112px)
   }
}

@media (min-width: 760px) {
   .aside-block.mod-full {
      grid-column: 1/span 2
   }
}

@media (min-width: 1000px) {
   .aside-block.mod-full {
      grid-column: 1
   }
}

.aside-block.mod-sticky {
   position: sticky;
   top: 22px
}

.build-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 4px
}

@media screen and (hover: hover) {
   .build-card:hover .build-card__cover img {
      transform: scale(1.06)
   }
}

.build-card:focus .build-card__cover img,
.build-card:active .build-card__cover img {
   transform: scale(1.06)
}

@media (min-width: 1340px) {
   .build-card {
      flex-direction: row
   }
}

.build-card:not(:first-of-type) .build-card__main:before,
.build-card:not(:first-of-type) .build-card__main:after {
   content: "";
   position: absolute
}

.build-card:not(:first-of-type) .build-card__main:before {
   top: -19px;
   width: 15px;
   left: 0;
   border-top: 1px solid var(--colorGray_05)
}

.build-card:not(:first-of-type) .build-card__main:after {
   top: -28px;
   left: 0;
   height: 19px;
   border-left: 1px solid var(--colorGray_05)
}

.build-card .build-card__cover:before,
.build-card .build-card__cover:after {
   content: "";
   position: absolute
}

.build-card .build-card__cover:before {
   top: -19px;
   width: calc(50% - 10px);
   right: 0;
   border-top: 1px solid var(--colorGray_05)
}

.build-card .build-card__cover:after {
   top: -28px;
   right: 0;
   height: 19px;
   border-left: 1px solid var(--colorGray_05)
}

.build-card__main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 44px 0 52px
}

@media (min-width: 760px) {
   .build-card__main {
      padding-inline: 5vw
   }
}

@media (min-width: 1340px) {
   .build-card__main {
      width: calc(50% - 2px);
      padding: 60px 64px 80px
   }
}

.build-card__cover {
   display: flex;
   order: -1;
   width: 100%;
   min-height: 240px;
   flex-shrink: 0
}

@media (min-width: 760px) {
   .build-card__cover {
      background-size: 168px
   }
}

@media (min-width: 1340px) {
   .build-card__cover {
      width: calc(50% - 2px);
      min-height: 520px
   }
}

.build-card__cover img {
   height: 100%;
   transition: var(--transition_Base)
}

.build-card__title {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H2);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorTitle);
   text-transform: uppercase
}

.build-card__title a {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-color: transparent;
   transition: var(--transition_Text)
}

@media screen and (hover: hover) {
   .build-card__title a:hover {
      color: var(--colorNotes);
      text-decoration-color: var(--colorNotes)
   }
}

.build-card__title a:focus,
.build-card__title a:active {
   color: var(--colorNotes);
   text-decoration-color: var(--colorNotes)
}

.build-card__desc strong {
   font-weight: var(--fontWeight_Bold);
   color: var(--colorNotes);
   transition: var(--transition_Text)
}

.build-card__data {
   margin-top: 32px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.build-card__data span {
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent)
}

.build-card__more {
   margin-top: 44px
}

@media (min-width: 1340px) {
   .build-card.mod-invert {
      flex-direction: row-reverse
   }
}

.build-card.mod-invert .build-card__cover:before {
   width: calc(50% - 10px);
   right: auto;
   left: 0
}

.build-card.mod-invert:not(:first-of-type) .build-card__main:before {
   right: 0;
   left: auto
}

.part-item {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 24px;
   padding: 11px 0;
   white-space: nowrap;
   border-bottom: 1px dashed var(--colorGray_05)
}

@media (min-width: 1660px) {
   .part-item {
      grid-template-columns: 2.5fr 1.5fr 1.25fr 1.5fr 1.65fr 1.05fr .85fr
   }
}

.part-item:before {
   content: "";
   position: absolute;
   top: 0;
   right: -12px;
   bottom: 0;
   left: -12px;
   z-index: -10
}

@media screen and (hover: hover) {
   .part-item:hover:before {
      background: var(--colorGray_05)
   }
}

.part-item:focus:before,
.part-item:active:before {
   background: var(--colorGray_05)
}

.part-item span {
   text-align: right
}

.part-item a {
   margin: -4px 0;
   padding: 4px 0;
   color: var(--colorAccent);
   text-decoration: underline;
   text-decoration-style: dotted;
   transition: var(--transition_Text)
}

@media screen and (hover: hover) {
   .part-item a:hover {
      color: var(--colorInvert)
   }
}

.part-item a:focus,
.part-item a:active {
   color: var(--colorInvert)
}

.part-item .mod-name {
   text-align: left
}

.part-item .mod-type {
   order: -1;
   text-align: left
}

.part-item .mod-spec {
   color: var(--colorWhite)
}

.service-card {
   position: relative;
   display: flex;
   align-items: flex-start;
   column-gap: 28px;
   row-gap: 8px;
   min-height: 120px;
   padding: 20px;
   border: 1px solid var(--colorGray_10);
   border-radius: 23px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .service-card:hover .service-card__marker {
      color: var(--colorSpec)
   }
}

.service-card:focus .service-card__marker,
.service-card:active .service-card__marker {
   color: var(--colorSpec)
}

@media (min-width: 760px) {
   .service-card {
      min-height: 132px;
      padding: 24px 32px 26px 24px
   }
}

@media (min-width: 1340px) {
   .service-card {
      min-height: 136px;
      padding-bottom: 24px
   }
}

@media (min-width: 1660px) {
   .service-card {
      padding: 28px 40px 24px 28px
   }
}

.service-card:before,
.service-card:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.service-card:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorGray_10)
}

.service-card:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorGray_10)
}

.service-card__marker {
   display: flex;
   align-items: center;
   column-gap: 12px;
   height: 35px;
   margin-top: 1px;
   font-family: var(--fontFamily_Extra);
   line-height: 1;
   font-size: 36px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorGray_50);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.service-card__info {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
   row-gap: 12px
}

@media (min-width: 1000px) {
   .service-card__info {
      row-gap: 20px
   }
}

@media (min-width: 1660px) {
   .service-card__info {
      row-gap: 24px
   }
}

.service-card__title {
   display: grid;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Desc);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.service-card__price {
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .service-card:hover {
      box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
   }

   .service-card:hover,
   .service-card:hover:before,
   .service-card:hover:after {
      border-color: var(--colorAccent)
   }

   .service-card:hover .service-card__title {
      color: var(--colorAccent)
   }
}

.service-card:focus,
.service-card:active {
   box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
}

.service-card:focus,
.service-card:focus:before,
.service-card:focus:after,
.service-card:active,
.service-card:active:before,
.service-card:active:after {
   border-color: var(--colorAccent)
}

.service-card:focus .service-card__title,
.service-card:active .service-card__title {
   color: var(--colorAccent)
}

.update-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   column-gap: 24px;
   row-gap: 8px;
   min-height: 152px;
   padding: 20px;
   border: 1px solid var(--colorGray_10);
   border-radius: 23px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .update-card:hover .update-card__date {
      color: var(--colorSpec)
   }
}

.update-card:focus .update-card__date,
.update-card:active .update-card__date {
   color: var(--colorSpec)
}

@media (min-width: 760px) {
   .update-card {
      padding: 24px 32px 26px 24px
   }
}

@media (min-width: 1340px) {
   .update-card {
      flex-direction: row;
      min-height: 168px;
      padding-bottom: 24px
   }
}

@media (min-width: 1660px) {
   .update-card {
      min-height: 176px;
      padding: 28px 40px 24px 28px
   }
}

.update-card:before,
.update-card:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.update-card:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorGray_10)
}

.update-card:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorGray_10)
}

.update-card__title {
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Main);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.update-card__info {
   order: -1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 152px;
   min-height: 78px;
   height: 100%
}

.update-card__date {
   display: flex;
   align-items: center;
   column-gap: 12px;
   line-height: 1.3;
   font-size: 11px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorGray_50);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.update-card__date b {
   margin-top: 2px;
   height: 35px;
   font-family: var(--fontFamily_Extra);
   line-height: 1;
   font-size: 36px
}

.update-card__type {
   font-size: var(--fontSize_Hint);
   color: var(--colorGray_50);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .update-card.mod-nexus:hover {
      box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
   }

   .update-card.mod-nexus:hover,
   .update-card.mod-nexus:hover:before,
   .update-card.mod-nexus:hover:after {
      border-color: var(--colorAccent)
   }

   .update-card.mod-nexus:hover .update-card__title {
      color: var(--colorAccent)
   }
}

.update-card.mod-nexus:focus,
.update-card.mod-nexus:active {
   box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
}

.update-card.mod-nexus:focus,
.update-card.mod-nexus:focus:before,
.update-card.mod-nexus:focus:after,
.update-card.mod-nexus:active,
.update-card.mod-nexus:active:before,
.update-card.mod-nexus:active:after {
   border-color: var(--colorAccent)
}

.update-card.mod-nexus:focus .update-card__title,
.update-card.mod-nexus:active .update-card__title {
   color: var(--colorAccent)
}

@media screen and (hover: hover) {
   .update-card.mod-work:hover {
      box-shadow: inset 0 0 30px 5px var(--colorProjects_Dark)
   }

   .update-card.mod-work:hover,
   .update-card.mod-work:hover:before,
   .update-card.mod-work:hover:after {
      border-color: var(--colorProjects)
   }

   .update-card.mod-work:hover .update-card__title {
      color: var(--colorProjects)
   }
}

.update-card.mod-work:focus,
.update-card.mod-work:active {
   box-shadow: inset 0 0 30px 5px var(--colorProjects_Dark)
}

.update-card.mod-work:focus,
.update-card.mod-work:focus:before,
.update-card.mod-work:focus:after,
.update-card.mod-work:active,
.update-card.mod-work:active:before,
.update-card.mod-work:active:after {
   border-color: var(--colorProjects)
}

.update-card.mod-work:focus .update-card__title,
.update-card.mod-work:active .update-card__title {
   color: var(--colorProjects)
}

@media screen and (hover: hover) {
   .update-card.mod-notes:hover {
      box-shadow: inset 0 0 30px 5px var(--colorNotes_Dark)
   }

   .update-card.mod-notes:hover,
   .update-card.mod-notes:hover:before,
   .update-card.mod-notes:hover:after {
      border-color: var(--colorNotes)
   }

   .update-card.mod-notes:hover .update-card__title {
      color: var(--colorNotes)
   }
}

.update-card.mod-notes:focus,
.update-card.mod-notes:active {
   box-shadow: inset 0 0 30px 5px var(--colorNotes_Dark)
}

.update-card.mod-notes:focus,
.update-card.mod-notes:focus:before,
.update-card.mod-notes:focus:after,
.update-card.mod-notes:active,
.update-card.mod-notes:active:before,
.update-card.mod-notes:active:after {
   border-color: var(--colorNotes)
}

.update-card.mod-notes:focus .update-card__title,
.update-card.mod-notes:active .update-card__title {
   color: var(--colorNotes)
}

@media screen and (hover: hover) {
   .update-card.mod-more:hover {
      box-shadow: inset 0 0 30px 5px var(--colorInvert_Dark)
   }

   .update-card.mod-more:hover,
   .update-card.mod-more:hover:before,
   .update-card.mod-more:hover:after {
      border-color: var(--colorInvert)
   }

   .update-card.mod-more:hover .update-card__title {
      color: var(--colorInvert)
   }
}

.update-card.mod-more:focus,
.update-card.mod-more:active {
   box-shadow: inset 0 0 30px 5px var(--colorInvert_Dark)
}

.update-card.mod-more:focus,
.update-card.mod-more:focus:before,
.update-card.mod-more:focus:after,
.update-card.mod-more:active,
.update-card.mod-more:active:before,
.update-card.mod-more:active:after {
   border-color: var(--colorInvert)
}

.update-card.mod-more:focus .update-card__title,
.update-card.mod-more:active .update-card__title {
   color: var(--colorInvert)
}

@media screen and (hover: hover) {
   .update-card.mod-info:hover {
      box-shadow: inset 0 0 30px 5px var(--colorNotify_Dark)
   }

   .update-card.mod-info:hover,
   .update-card.mod-info:hover:before,
   .update-card.mod-info:hover:after {
      border-color: var(--colorNotify)
   }

   .update-card.mod-info:hover .update-card__title {
      color: var(--colorNotify)
   }
}

.update-card.mod-info:focus,
.update-card.mod-info:active {
   box-shadow: inset 0 0 30px 5px var(--colorNotify_Dark)
}

.update-card.mod-info:focus,
.update-card.mod-info:focus:before,
.update-card.mod-info:focus:after,
.update-card.mod-info:active,
.update-card.mod-info:active:before,
.update-card.mod-info:active:after {
   border-color: var(--colorNotify)
}

.update-card.mod-info:focus .update-card__title,
.update-card.mod-info:active .update-card__title {
   color: var(--colorNotify)
}

.answers-block {
   position: relative;
   z-index: 10;
   row-gap: 40px
}

@media (min-width: 480px) {
   .answers-block {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .answers-block {
      padding: 0
   }
}

.answers-block__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .answers-block__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .answers-block__header {
      grid-column: 2/span 10
   }
}

.answers-block__feed {
   overflow: hidden;
   display: grid;
   grid-column: 1/span 4;
   gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .answers-block__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .answers-block__feed {
      grid-column: 2/span 10;
      grid-template-columns: repeat(3, 1fr)
   }
}

.answers-block__card {
   position: relative;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--colorGray_10);
   border-radius: 23px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .answers-block__card:hover {
      box-shadow: inset 0 0 20px 4px var(--colorAccent_Dark)
   }

   .answers-block__card:hover,
   .answers-block__card:hover:before,
   .answers-block__card:hover:after {
      border-color: var(--colorAccent)
   }

   .answers-block__card:hover .service-card__marker {
      color: var(--colorSpec)
   }
}

.answers-block__card:focus,
.answers-block__card:active {
   box-shadow: inset 0 0 20px 4px var(--colorAccent_Dark)
}

.answers-block__card:focus,
.answers-block__card:focus:before,
.answers-block__card:focus:after,
.answers-block__card:active,
.answers-block__card:active:before,
.answers-block__card:active:after {
   border-color: var(--colorAccent)
}

.answers-block__card:focus .service-card__marker,
.answers-block__card:active .service-card__marker {
   color: var(--colorSpec)
}

@media (min-width: 1000px) {
   .answers-block__card {
      grid-column: span 2
   }
}

.answers-block__card:before,
.answers-block__card:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.answers-block__card:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorGray_10)
}

.answers-block__card:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorGray_10)
}

.answers-block__query {
   display: flex;
   padding: 20px
}

@media (min-width: 760px) {
   .answers-block__query {
      padding: 24px
   }
}

@media (min-width: 1660px) {
   .answers-block__query {
      padding: 28px
   }
}

@media screen and (hover: hover) {
   .answers-block__query:hover span {
      color: var(--colorAccent)
   }
}

.answers-block__query:focus span,
.answers-block__query:active span {
   color: var(--colorAccent)
}

.answers-block__title {
   display: flex;
   column-gap: 8px;
   font-weight: var(--fontWeight_Bold);
   text-transform: uppercase;
   pointer-events: none
}

.answers-block__title small {
   display: inline-flex;
   width: 36px;
   margin-top: 2px;
   font-family: var(--fontFamily_Extra);
   line-height: 1;
   font-size: 18px;
   color: var(--colorAccent)
}

.answers-block__title span {
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Desc);
   color: var(--colorSpec);
   transition: var(--transition_Base)
}

.answers-block__toggle {
   display: none;
   flex-shrink: 0;
   width: 17px;
   height: 17px;
   margin: 4px 0 0 auto;
   background-size: 17px;
   opacity: .4;
   transition: var(--transition_Base);
   pointer-events: none
}

@media (min-width: 760px) {
   .answers-block__toggle {
      display: flex;
      width: 19px;
      height: 19px;
      margin-top: 2px;
      background-size: 19px
   }
}

@media (min-width: 1660px) {
   .answers-block__toggle {
      width: 21px;
      height: 21px;
      background-size: 21px
   }
}

.answers-block__main {
   overflow: hidden;
   padding: 0 20px;
   animation-fill-mode: both
}

@media (min-width: 760px) {
   .answers-block__main {
      padding: 0 40px 24px 68px
   }
}

@media (min-width: 1660px) {
   .answers-block__main {
      padding: 0 44px 28px 72px
   }
}

.answers-block__main p {
   margin-top: var(--textMargin_Base)
}

.answers-block__card.is-on {
   box-shadow: inset 0 0 20px 4px var(--colorAccent_Dark)
}

.answers-block__card.is-on .answers-block__title span {
   color: var(--colorAccent)
}

.answers-block__card.is-on .answers-block__toggle {
   opacity: 1
}

.answers-block__card.is-on .answers-block__main {
   animation-name: answersBlock_On;
   animation-duration: .4s;
   animation-timing-function: ease
}

.answers-block__card.is-on,
.answers-block__card.is-on:before,
.answers-block__card.is-on:after {
   border-color: var(--colorAccent)
}

.answers-block__card.is-off .answers-block__main {
   animation-name: answersBlock_Off;
   animation-duration: .3s;
   animation-timing-function: ease
}

@keyframes answersBlock_On {
   0% {
      max-height: 0;
      padding-bottom: 0
   }

   to {
      max-height: 1000px;
      padding-bottom: 40px
   }
}

@keyframes answersBlock_Off {
   0% {
      max-height: 1000px;
      padding-bottom: 40px
   }

   to {
      max-height: 0;
      padding-bottom: 0
   }
}

.app-legal {
   display: grid;
   gap: var(--gapsCol_Base);
   padding: 52px 0 60px;
   font-family: var(--fontFamily_Extra)
}

.app-legal__desc {
   grid-column: span 4;
   display: flex;
   flex-direction: column;
   row-gap: 12px;
   color: var(--colorGray_40)
}

@media (min-width: 760px) {
   .app-legal__desc {
      grid-column: span 5
   }
}

.app-legal__desc span {
   color: var(--colorWhite)
}

.app-legal__devs {
   grid-column: span 4
}

@media (min-width: 760px) {
   .app-legal__devs {
      grid-column: span 3;
      text-align: right
   }
}

@media (min-width: 1340px) {
   .app-legal__devs {
      grid-column: span 7
   }
}

.app-legal__devs span {
   color: var(--colorWhite);
   transition: var(--transition_Base)
}

.app-legal__devs a {
   display: inline-block;
   margin: -12px -8px;
   padding: 12px 8px;
   color: var(--colorGray_40);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .app-legal__devs a:hover {
      color: var(--colorGray_30)
   }

   .app-legal__devs a:hover span {
      color: var(--colorInvert);
      text-shadow: 0 0 2rem var(--colorInvert)
   }
}

.app-legal__devs a:focus,
.app-legal__devs a:active {
   color: var(--colorGray_30)
}

.app-legal__devs a:focus span,
.app-legal__devs a:active span {
   color: var(--colorInvert);
   text-shadow: 0 0 2rem var(--colorInvert)
}

.builds-example {
   position: relative;
   row-gap: 40px;
   padding-bottom: 24px
}

@media (min-width: 480px) {
   .builds-example {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .builds-example {
      padding: 0
   }
}

.builds-example:before {
   content: "";
   position: absolute;
   top: -60px;
   right: 0;
   width: 520px;
   min-height: 520px;
   aspect-ratio: 1/1;
   background: radial-gradient(circle, rgba(113, 25, 231, .075), transparent 80%);
   pointer-events: none
}

@media (min-width: 760px) {
   .builds-example:before {
      top: 4%;
      width: 72%
   }
}

.builds-example__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .builds-example__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .builds-example__header {
      grid-column: 2/span 10
   }
}

.builds-example__feed {
   display: grid;
   grid-column: 1/span 4;
   gap: 40px
}

@media (min-width: 760px) {
   .builds-example__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .builds-example__feed {
      grid-column: 2/span 10
   }
}

.builds-example__footer {
   position: relative;
   display: flex;
   justify-content: center;
   grid-column: 1/span 4;
   margin: -24px 0 -20px
}

@media (min-width: 760px) {
   .builds-example__footer {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .builds-example__footer {
      grid-column: 2/span 10
   }
}

.builds-example__footer:before,
.builds-example__footer:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0
}

.builds-example__footer:before {
   top: 50%;
   border-top: 1px solid var(--colorGray_05)
}

.builds-example__footer:after {
   top: calc(50% - 9px);
   height: 19px;
   border-right: 1px solid var(--colorGray_05);
   border-left: 1px solid var(--colorGray_05)
}

.builds-example__more {
   position: relative;
   z-index: 10;
   min-width: 208px;
   outline: 24px solid var(--colorBlack)
}

.content-index {
   position: relative;
   margin-top: 1px;
   padding: 24px 24px 20px;
   background: var(--colorBlack);
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.content-index:before,
.content-index:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.content-index:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.content-index:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

@media (min-width: 1000px) {
   .content-index {
      padding: 12px 0 0;
      border: 0;
      box-shadow: none
   }

   .content-index:before,
   .content-index:after {
      display: none
   }
}

.content-index__title {
   margin-bottom: 12px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

.content-index__list {
   position: relative
}

.content-index__list:before {
   content: "";
   position: absolute;
   top: -1px;
   right: 0;
   left: 0;
   z-index: 10;
   height: 3px;
   background: var(--colorBlack)
}

@media (min-width: 1000px) {
   .content-index__list:before {
      display: none
   }
}

@media (min-width: 760px) {
   .content-index__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .content-index__list {
      grid-template-columns: none;
      border-bottom: 1px dashed var(--colorGray_05)
   }
}

.content-index__item {
   position: relative
}

.content-index__item:not(:first-child) {
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 1000px) {
   .content-index__item:first-child {
      border-top: 1px dashed var(--colorGray_05)
   }
}

.content-index__item:before {
   content: "-";
   position: absolute;
   top: 7px;
   left: 0;
   font-size: 1em;
   color: var(--colorGray_20);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .content-index__item:hover:before {
      color: var(--colorInvert)
   }
}

.content-index__item:focus:before,
.content-index__item:active:before {
   color: var(--colorInvert)
}

.content-index__link {
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .content-index__link:hover {
      color: var(--colorInvert)
   }
}

.content-index__link:focus,
.content-index__link:active {
   color: var(--colorInvert)
}

.crumbs-nav {
   overflow: auto;
   display: flex;
   padding: 0 15px;
   font-size: var(--fontSize_Hint);
   text-transform: uppercase
}

@media screen and (hover: hover) {

   .crumbs-nav:hover .crumbs-nav__item:before,
   .crumbs-nav:hover .crumbs-nav__item:after {
      color: var(--colorAccent)
   }
}

.crumbs-nav:focus .crumbs-nav__item:before,
.crumbs-nav:focus .crumbs-nav__item:after,
.crumbs-nav:active .crumbs-nav__item:before,
.crumbs-nav:active .crumbs-nav__item:after {
   color: var(--colorAccent)
}

.crumbs-nav__item {
   display: flex;
   flex-shrink: 0
}

.crumbs-nav__item:before,
.crumbs-nav__item:after {
   margin-right: .62em;
   padding: 8px 0 9px;
   color: var(--colorAccent);
   transition: var(--transition_Base)
}

@media (min-width: 1340px) {

   .crumbs-nav__item:before,
   .crumbs-nav__item:after {
      color: var(--colorGray_10)
   }
}

.crumbs-nav__item:not(:last-of-type):after {
   content: "/";
   margin-left: .62em
}

.crumbs-nav__item.mod-this:after {
   content: ".html"
}

.crumbs-nav__item.mod-back:before {
   content: "_"
}

@media (min-width: 1340px) {
   .crumbs-nav__item.mod-back:before {
      color: var(--colorGray_50)
   }
}

.crumbs-nav__here,
.crumbs-nav__link {
   display: inline-flex;
   padding: 8px 0 9px;
   transition: var(--transition_Base);
   cursor: default
}

.crumbs-nav__link {
   padding: 8px 0 9px;
   color: var(--colorText)
}

@media (min-width: 1340px) {
   .crumbs-nav__link {
      color: var(--colorGray_50)
   }
}

@media screen and (hover: hover) {
   .crumbs-nav__link:hover {
      color: var(--colorText);
      text-decoration-color: var(--colorGray_40)
   }
}

.crumbs-nav__link:focus,
.crumbs-nav__link:active {
   color: var(--colorText);
   text-decoration-color: var(--colorGray_40)
}

.crumbs-nav__here,
.crumbs-nav__link {
   color: var(--colorGray_50)
}

.eshop-widget {
   position: relative;
   display: grid;
   padding: 24px 24px 22px;
   row-gap: 12px;
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.eshop-widget:before,
.eshop-widget:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.eshop-widget:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.eshop-widget:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

.eshop-widget__logo {
   display: flex;
   aspect-ratio: 370/327;
   margin-bottom: 8px;
   background-color: var(--colorGray_02)
}

.eshop-widget__logo img {
   width: 100%
}

.eshop-widget__price {
   display: flex;
   flex-direction: column;
   font-size: var(--fontSize_H3);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite)
}

.eshop-widget__price span {
   order: 2;
   color: var(--colorAccent);
   text-transform: uppercase;
   font-size: var(--fontSize_Hint)
}

.eshop-widget__list {
   position: relative;
   display: grid;
   padding-top: 12px;
   row-gap: 20px;
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 760px) {
   .eshop-widget__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .eshop-widget__list {
      grid-template-columns: none
   }
}

.eshop-widget__item {
   position: relative;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
   font-size: var(--fontSize_Hint)
}

.eshop-widget__name {
   text-transform: uppercase
}

.eshop-widget__value {
   padding-left: 20px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite)
}

.eshop-widget__value:before {
   content: "";
   position: absolute;
   top: 27px;
   left: 1px;
   width: 5px;
   height: 9px;
   border-left: 1px solid var(--colorAccent);
   border-bottom: 1px solid var(--colorAccent)
}

.eshop-widget__value a {
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .eshop-widget__value a:hover {
      color: var(--colorInvert)
   }
}

.eshop-widget__value a:focus,
.eshop-widget__value a:active {
   color: var(--colorInvert)
}

.example-gallery {
   position: relative;
   row-gap: 40px
}

@media (min-width: 480px) {
   .example-gallery {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .example-gallery {
      padding: 0
   }
}

.example-gallery:before {
   content: "";
   position: absolute;
   top: -60px;
   left: -120px;
   width: 100%;
   max-width: 520px;
   min-height: 520px;
   aspect-ratio: 1/1;
   background: radial-gradient(circle, rgba(113, 25, 231, .225), transparent 80%);
   pointer-events: none
}

@media (min-width: 1660px) {
   .example-gallery:before {
      top: -16%;
      left: -8%;
      width: 72%
   }
}

.example-gallery__header {
   position: relative;
   z-index: 10;
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .example-gallery__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .example-gallery__header {
      grid-column: 2/span 10
   }
}

.example-gallery__feed {
   overflow: hidden;
   display: grid;
   grid-column: 1/span 4;
   grid-template-columns: repeat(2, 1fr);
   gap: 4px;
   width: calc(100% + 2px);
   margin: -1px;
   padding: 1px
}

@media screen and (hover: hover) {
   .example-gallery__feed:hover .example-gallery__card:after {
      background: var(--colorGray_70)
   }
}

@media (min-width: 760px) {
   .example-gallery__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1000px) {
   .example-gallery__feed {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media (min-width: 1340px) {
   .example-gallery__feed {
      grid-column: 2/span 10
   }
}

@media (min-width: 1660px) {
   .example-gallery__feed {
      grid-template-columns: repeat(4, 1fr)
   }
}

.example-gallery__card {
   overflow: hidden;
   position: relative;
   display: flex;
   aspect-ratio: 16/14;
   background: var(--colorGray_02)
}

.example-gallery__card:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 10;
   background: var(--colorGray_65);
   opacity: .5;
   transition: background-color .3s, opacity .3s;
   pointer-events: none
}

.example-gallery__card .example-gallery__cover img {
   transform: scale(1.01)
}

@media screen and (hover: hover) {
   .example-gallery__card:hover {
      outline: 1px solid var(--colorNotes_Glow)
   }

   .example-gallery__card:hover:after {
      opacity: 0
   }

   .example-gallery__card:hover .example-gallery__cover img {
      transform: scale(1.06)
   }

   .example-gallery__card:hover .example-gallery__zoom {
      transform: skew(-22deg) translate(0)
   }
}

.example-gallery__card:focus,
.example-gallery__card:active {
   outline: 1px solid var(--colorNotes_Glow)
}

.example-gallery__card:focus:after,
.example-gallery__card:active:after {
   opacity: 0
}

.example-gallery__card:focus .example-gallery__cover img,
.example-gallery__card:active .example-gallery__cover img {
   transform: scale(1.06)
}

.example-gallery__card:focus .example-gallery__zoom,
.example-gallery__card:active .example-gallery__zoom {
   transform: skew(-22deg) translate(0)
}

.example-gallery__cover {
   display: flex
}

.example-gallery__cover img {
   height: 100%;
   transition: var(--transition_Base)
}

.example-gallery__zoom {
   position: absolute;
   top: 0;
   left: -10px;
   z-index: 15;
   display: flex;
   align-items: center;
   height: 29px;
   padding: 1px 8px 0 26px;
   font-size: 0;
   background: var(--colorNotes_Glow);
   background-image: radial-gradient(circle at right, var(--colorNotes_Dark), transparent 40%);
   border: 1px solid var(--colorNotes_Dark);
   transition: var(--transition_Text);
   transform: skew(-22deg) translate(-80px)
}

@media (min-width: 760px) {
   .example-gallery__zoom {
      height: 35px;
      padding: 1px 10px 0 30px
   }
}

.example-gallery__zoom i {
   width: 18px;
   height: 18px;
   background-size: 18px;
   transform: skew(22deg)
}

@media (min-width: 760px) {
   .example-gallery__zoom i {
      width: 20px;
      height: 20px;
      background-size: 20px
   }
}

.global-nav {
   position: relative;
   display: flex;
   align-items: center
}

.global-nav__menu {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 2000;
   width: 100%;
   height: 100vh;
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

@media (min-width: 1000px) {
   .global-nav__menu {
      position: relative;
      display: flex;
      max-width: none;
      height: 100%
   }
}

.global-nav__menu.is-on {
   z-index: 2030;
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .35s
}

.global-nav__menu.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .2s
}

.global-nav__main {
   overflow-x: hidden;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 52px 20px 12vh
}

@media (min-width: 1000px) {
   .global-nav__main {
      overflow: visible;
      padding: 0;
      column-gap: 32px
   }
}

.global-nav__main .lang-toggle,
.global-nav__main .hero-order {
   position: absolute;
   top: 23px;
   left: clamp(16px, 4.175vw, 32px)
}

.global-nav__list {
   display: flex;
   flex-direction: column;
   row-gap: 16px
}

@media (min-width: 1000px) {
   .global-nav__list {
      flex-direction: row;
      margin: 0;
      column-gap: clamp(40px, 4vw, 56px)
   }
}

.global-nav__link {
   display: flex;
   align-items: center;
   height: var(--buttonSize_Base);
   margin: 0 -12px;
   padding: 0 12px;
   font-size: 17px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase
}

.global-nav__link:before,
.global-nav__link:after {
   display: inline-flex;
   color: var(--colorGray_20);
   transition: var(--transition_Text);
   animation: colorLoading 1s forwards;
   opacity: 0
}

.anim-hero .global-nav__link:before,
.anim-hero .global-nav__link:after {
   animation-delay: 3s
}

.global-nav__link:before {
   content: "_";
   margin: -1px 8px 0 0;
   font-weight: var(--fontWeight_Bold)
}

.global-nav__link:after {
   content: "/";
   padding-left: 3px
}

@media screen and (hover: hover) {

   .global-nav__link:hover:before,
   .global-nav__link:hover:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

.global-nav__link:focus:before,
.global-nav__link:focus:after,
.global-nav__link:active:before,
.global-nav__link:active:after {
   color: var(--colorAccent);
   text-shadow: 0 0 .5rem var(--colorAccent_Glow)
}

@media (min-width: 1000px) {
   .global-nav__link {
      font-size: var(--fontSize_Menu)
   }
}

.global-nav__open {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 42px;
   height: 34px;
   font-size: 0;
   letter-spacing: 0;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase;
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

.global-nav__open:before,
.global-nav__open:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   color: var(--colorGray_20);
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.global-nav__open:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.global-nav__open:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {
   .global-nav__open:hover {
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }

   .global-nav__open:hover,
   .global-nav__open:hover:before,
   .global-nav__open:hover:after {
      border-color: var(--colorAccent)
   }
}

.global-nav__open:focus,
.global-nav__open:active {
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.global-nav__open:focus,
.global-nav__open:focus:before,
.global-nav__open:focus:after,
.global-nav__open:active,
.global-nav__open:active:before,
.global-nav__open:active:after {
   border-color: var(--colorAccent)
}

@media (min-width: 480px) {
   .global-nav__open {
      align-items: center;
      width: auto;
      height: var(--buttonSize_Base);
      margin: 0 -12px;
      padding: 0 12px;
      font-size: var(--fontSize_Menu);
      border: 0
   }

   .global-nav__open:before,
   .global-nav__open:after {
      position: static;
      display: inline-flex;
      width: auto;
      height: auto;
      background: none;
      border: 0;
      transform: none;
      transition: var(--transition_Text);
      animation: colorLoading 1s forwards;
      opacity: 0
   }

   .anim-hero .global-nav__open:before,
   .anim-hero .global-nav__open:after {
      animation-delay: 3s
   }

   .global-nav__open:before {
      content: "_";
      margin: -1px 8px 0 0;
      font-weight: var(--fontWeight_Bold)
   }

   .global-nav__open:after {
      content: "/";
      padding-left: 3px
   }
}

@media screen and (min-width: 480px) and (hover: hover) {
   .global-nav__open:hover {
      box-shadow: none
   }

   .global-nav__open:hover:before,
   .global-nav__open:hover:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

@media (min-width: 480px) {

   .global-nav__open:focus,
   .global-nav__open:active {
      box-shadow: none
   }

   .global-nav__open:focus:before,
   .global-nav__open:focus:after,
   .global-nav__open:active:before,
   .global-nav__open:active:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

@media (min-width: 480px) {
   .global-nav__open .icon-menu {
      display: none
   }
}

@media (min-width: 1000px) {
   .global-nav__open {
      display: none
   }
}

.global-nav__close {
   position: absolute;
   top: 23px;
   right: clamp(16px, 4.175vw, 32px);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 42px;
   height: 34px;
   font-size: 0;
   font-weight: var(--fontWeight_Bold);
   letter-spacing: 0;
   color: var(--colorSpec);
   text-transform: lowercase;
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

.global-nav__close:before,
.global-nav__close:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   color: var(--colorGray_20);
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.global-nav__close:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.global-nav__close:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {
   .global-nav__close:hover {
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }

   .global-nav__close:hover,
   .global-nav__close:hover:before,
   .global-nav__close:hover:after {
      border-color: var(--colorAccent)
   }
}

.global-nav__close:focus,
.global-nav__close:active {
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.global-nav__close:focus,
.global-nav__close:focus:before,
.global-nav__close:focus:after,
.global-nav__close:active,
.global-nav__close:active:before,
.global-nav__close:active:after {
   border-color: var(--colorAccent)
}

@media (min-width: 1000px) {
   .global-nav__close {
      display: none
   }
}

.global-nav__onlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 20;
   display: none;
   background: radial-gradient(circle at 180% 120%, rgba(113, 25, 231, .2) 0%, var(--colorBlack) 75%), var(--colorBlack);
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

.global-nav__onlay.is-on {
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .35s
}

.global-nav__onlay.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .2s
}

@media screen and (hover: hover) {

   .global-nav__link.mod-work:hover:before,
   .global-nav__link.mod-work:hover:after {
      color: var(--colorProjects);
      text-shadow: 0 0 .5rem var(--colorProjects_Glow)
   }
}

.global-nav__link.mod-work:focus:before,
.global-nav__link.mod-work:focus:after,
.global-nav__link.mod-work:active:before,
.global-nav__link.mod-work:active:after {
   color: var(--colorProjects);
   text-shadow: 0 0 .5rem var(--colorProjects_Glow)
}

@media screen and (hover: hover) {

   .global-nav__link.mod-notes:hover:before,
   .global-nav__link.mod-notes:hover:after {
      color: var(--colorNotes);
      text-shadow: 0 0 .5rem var(--colorNotes_Glow)
   }
}

.global-nav__link.mod-notes:focus:before,
.global-nav__link.mod-notes:focus:after,
.global-nav__link.mod-notes:active:before,
.global-nav__link.mod-notes:active:after {
   color: var(--colorNotes);
   text-shadow: 0 0 .5rem var(--colorNotes_Glow)
}

@media screen and (hover: hover) {

   .global-nav__link.mod-more:hover:before,
   .global-nav__link.mod-more:hover:after {
      color: var(--colorInvert);
      text-shadow: 0 0 .5rem var(--colorInvert_Glow)
   }
}

.global-nav__link.mod-more:focus:before,
.global-nav__link.mod-more:focus:after,
.global-nav__link.mod-more:active:before,
.global-nav__link.mod-more:active:after {
   color: var(--colorInvert);
   text-shadow: 0 0 .5rem var(--colorInvert_Glow)
}

.hero-block {
   position: relative;
   align-items: center
}

.hero-block__main {
   position: relative;
   z-index: 50;
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 64vh;
   min-height: 440px
}

@media (min-width: 480px) {
   .hero-block__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .hero-block__main {
      grid-column: 2/span 6;
      padding: 0
   }
}

@media (min-width: 1340px) {
   .hero-block__main {
      grid-column: 2/span 10;
      height: 680px
   }
}

.hero-block__title {
   line-height: 1.05;
   font-size: clamp(28px, 7vw, 64px);
   color: var(--colorSpec);
   text-transform: uppercase
}

@media (min-width: 760px) {
   .hero-block__title {
      text-transform: none
   }
}

.hero-block__title span {
   display: inline-flex
}

.hero-block__title span:after {
   content: "_";
   display: flex;
   margin-left: .5em;
   color: transparent;
   animation: textCaretFade 8s infinite 2.5s
}

@media (min-width: 1340px) {
   .hero-block__title span:after {
      animation-delay: 3s
   }
}

.hero-block__desc {
   max-width: 400px;
   margin-top: 20px;
   padding-left: 1.2942em;
   font-size: var(--fontSize_Spec);
   color: var(--colorGray_50);
   text-transform: uppercase
}

@media (min-width: 1000px) {
   .hero-block__desc {
      max-width: none
   }
}

.hero-block__desc:before {
   content: "└";
   margin-left: -1.2942em;
   color: var(--colorGray_10);
   animation: textColorSwitch_Accent 1s forwards 2.5s
}

@media (min-width: 1340px) {
   .hero-block__desc:before {
      animation-delay: 3s
   }
}

.hero-block__desc .cursor {
   color: var(--colorInvert)
}

.hero-block__cover {
   position: absolute;
   top: -80px;
   right: -28px;
   left: 0;
   z-index: 20;
   display: none;
   justify-content: center;
   align-items: center;
   height: 840px
}

@media (min-width: 1340px) {
   .hero-block__cover {
      display: flex
   }
}

@media (min-width: 1660px) {
   .hero-block__cover {
      right: -36px
   }
}

.hero-block__logo {
   width: 840px;
   height: 680px;
   margin-top: -40px;
   transform: translate(920px);
   opacity: .65;
   animation: unrealLogo_Glow 1s forwards 4s
}

.hero-block__logo path {
   animation: unrealLogo_Stroke 1.5s forwards 3s
}

.hero-block.mod-style {
   position: static
}

.hero-block.mod-style .hero-block__title {
   text-shadow: 0 0 1em rgba(0, 0, 0, .35)
}

.hero-block.mod-style .hero-block__desc {
   color: var(--colorGray_40);
   text-shadow: 0 0 1em rgba(0, 0, 0, .35)
}

.hero-block.mod-style .hero-block__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0 !important;
   left: 0;
   z-index: -10;
   display: flex;
   height: 80vh;
   min-height: 720px;
   align-items: normal
}

.hero-block.mod-style .hero-block__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

.hero-block.mod-style .hero-block__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.hero-order {
   overflow: hidden;
   display: flex;
   align-items: center
}

.hero-order__action {
   position: relative;
   display: flex;
   width: 43px;
   height: 34px;
   padding: 6px 0 0 11px;
   text-transform: lowercase;
   border: 1px solid var(--colorAccent);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .hero-order__action:hover {
      border-color: var(--colorInvert);
      box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
   }

   .hero-order__action:hover span {
      background: var(--colorInvert)
   }
}

.hero-order__action:focus,
.hero-order__action:active {
   border-color: var(--colorInvert);
   box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
}

.hero-order__action:focus span,
.hero-order__action:active span {
   background: var(--colorInvert)
}

@media (min-width: 1340px) {
   .hero-order__action {
      height: var(--buttonSize_Mini)
   }
}

.hero-order__action span {
   display: flex;
   height: 17px;
   width: 17px;
   font-size: 0;
   background: var(--colorGray_30);
   -webkit-mask-image: url(./telegram-BSwOVQq4.svg);
   mask-image: url(./telegram-BSwOVQq4.svg);
   -webkit-mask-size: 17px;
   mask-size: 17px;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   transition: var(--transition_Base)
}

.hero-order__action:before,
.hero-order__action:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.hero-order__action:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorAccent)
}

.hero-order__action:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorAccent)
}

@media screen and (hover: hover) {

   .hero-order__action:hover:before,
   .hero-order__action:hover:after {
      border-color: var(--colorInvert)
   }
}

.hero-order__action:focus:before,
.hero-order__action:focus:after,
.hero-order__action:active:before,
.hero-order__action:active:after {
   border-color: var(--colorInvert)
}

.lang-toggle {
   overflow: hidden;
   display: flex;
   align-items: center
}

.lang-toggle__action {
   position: relative;
   display: flex;
   align-items: center;
   width: 43px;
   height: 34px;
   padding: 0 10px 0 11px;
   font-size: var(--fontSize_Menu);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase;
   transition: var(--transition_Base);
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0
}

@media screen and (hover: hover) {
   .lang-toggle__action:hover {
      border-color: var(--colorAccent);
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }
}

.lang-toggle__action:focus,
.lang-toggle__action:active {
   border-color: var(--colorAccent);
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

@media (min-width: 1340px) {
   .lang-toggle__action {
      height: var(--buttonSize_Mini)
   }
}

.lang-toggle__action:before,
.lang-toggle__action:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.lang-toggle__action:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.lang-toggle__action:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {

   .lang-toggle__action:hover:before,
   .lang-toggle__action:hover:after {
      border-color: var(--colorAccent)
   }
}

.lang-toggle__action:focus:before,
.lang-toggle__action:focus:after,
.lang-toggle__action:active:before,
.lang-toggle__action:active:after {
   border-color: var(--colorAccent)
}

.markers-desc {
   position: relative;
   margin-top: 1px;
   padding: 24px 24px 20px;
   background: var(--colorBlack);
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.markers-desc:before,
.markers-desc:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.markers-desc:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.markers-desc:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

@media (min-width: 1000px) {
   .markers-desc {
      padding: 12px 0 0;
      border: 0;
      box-shadow: none
   }

   .markers-desc:before,
   .markers-desc:after {
      display: none
   }
}

.markers-desc__title {
   margin-bottom: 12px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

.markers-desc__list {
   position: relative
}

.markers-desc__list:before {
   content: "";
   position: absolute;
   top: -1px;
   right: 0;
   left: 0;
   z-index: 10;
   height: 3px;
   background: var(--colorBlack)
}

@media (min-width: 1000px) {
   .markers-desc__list:before {
      display: none
   }
}

@media (min-width: 760px) {
   .markers-desc__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .markers-desc__list {
      grid-template-columns: none;
      border-bottom: 1px dashed var(--colorGray_05)
   }
}

.markers-desc__item {
   position: relative;
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

.markers-desc__item:not(:first-child) {
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 1000px) {
   .markers-desc__item:first-child {
      border-top: 1px dashed var(--colorGray_05)
   }
}

.markers-desc__item:before {
   content: "/";
   position: absolute;
   top: 10px;
   left: 0;
   font-size: 1em;
   color: var(--colorGray_20);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .markers-desc__item:hover:before {
      color: var(--colorInvert)
   }
}

.markers-desc__item:focus:before,
.markers-desc__item:active:before {
   color: var(--colorInvert)
}

.page-lead {
   margin-bottom: var(--textMargin_Mega);
   padding-top: clamp(60px, 7.9vw, 104px)
}

.page-lead__main {
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center
}

@media (min-width: 480px) {
   .page-lead__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .page-lead__main {
      grid-column: 1/span 8
   }
}

@media (min-width: 1000px) {
   .page-lead__main {
      grid-column: 1/span 6;
      padding-right: 72px
   }
}

@media (min-width: 1340px) {
   .page-lead__main {
      grid-column: 4/span 6;
      padding: 0
   }
}

.page-lead__main:after {
   content: "- - -";
   display: flex;
   height: 3px;
   margin: 1.35em 0 0 -.18em;
   line-height: 3px;
   font-size: var(--fontSize_H2);
   color: var(--colorGray_10)
}

.page-lead__title {
   margin-bottom: var(--textMargin_Base);
   line-height: var(--lineHeight_H1);
   font-size: var(--fontSize_H1);
   color: var(--colorSpec);
   text-transform: capitalize
}

@media (min-width: 480px) {
   .page-lead__title:before {
      content: "/";
      margin: 0 .6em 0 -1.224em;
      color: var(--colorAccent)
   }
}

@media (min-width: 1340px) {
   .page-lead__title:before {
      color: var(--colorGray_10)
   }
}

html[lang=ru] .page-lead__title {
   text-transform: none
}

.page-lead__info {
   color: var(--colorGray_50)
}

.page-lead__info mark {
   order: -1;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent)
}

.page-lead__info time {
   color: var(--colorGray_40)
}

.page-lead__intro {
   margin-top: var(--textMargin_Plus);
   color: var(--colorGray_40)
}

.page-lead__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: -10;
   height: 80vh;
   min-height: 720px
}

.page-lead__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

.page-lead__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.page-lead.mod-cover {
   padding-top: clamp(15vh, 31.5vw, 25vh)
}

@media (min-width: 1000px) {
   .page-lead.mod-video .page-lead__main {
      grid-column: 1/span 7
   }
}

@media (min-width: 1340px) {
   .page-lead.mod-video .page-lead__main {
      grid-column: 3/span 8;
      padding: 0
   }
}

.place-an-order {
   padding-bottom: clamp(88px, 8.8vw, 112px);
   row-gap: 40px
}

@media (min-width: 480px) {
   .place-an-order {
      padding-inline: 52px
   }
}

@media (min-width: 760px) {
   .place-an-order {
      padding-inline: 0
   }
}

.place-an-order__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .place-an-order__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .place-an-order__header {
      grid-column: 2/span 10
   }
}

.place-an-order__main {
   display: grid;
   grid-column: 1/span 4;
   align-items: flex-start;
   gap: var(--gapsCol_Mega)
}

@media (min-width: 760px) {
   .place-an-order__main {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .place-an-order__main {
      grid-column: 2/span 10;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1660px) {
   .place-an-order__main {
      grid-template-columns: repeat(3, 1fr)
   }
}

.place-an-order__data {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: var(--gapsCol_Base);
   row-gap: var(--gapsCol_Plus)
}

@media (min-width: 1000px) {
   .place-an-order__data {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media (min-width: 1340px) {
   .place-an-order__data {
      grid-column: span 3;
      grid-template-columns: repeat(2, 1fr);
      padding: 24px 0
   }
}

@media (min-width: 1660px) {
   .place-an-order__data {
      grid-column: span 2;
      grid-template-columns: repeat(3, 1fr);
      padding-top: 28px;
      row-gap: 50px
   }
}

.place-an-order__item {
   display: flex;
   flex-direction: column;
   column-gap: 24px;
   row-gap: 16px
}

.place-an-order__item:last-child {
   grid-column: span 2
}

@media (min-width: 760px) {
   .place-an-order__item {
      flex-direction: row
   }
}

.place-an-order__item i {
   width: 32px;
   height: 32px;
   background-size: 32px
}

.place-an-order__item span {
   display: block;
   margin: 3px 0 6px;
   font-size: var(--fontSize_Desc);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite)
}

.place-an-order__cta {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: 32px;
   padding: 42px 28px 52px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Spec);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite);
   text-align: center;
   transition: var(--transition_Base)
}

@media (min-width: 1340px) {
   .place-an-order__cta {
      grid-column: span 2;
      margin-top: -18px;
      font-size: var(--fontSize_H3)
   }
}

@media (min-width: 1660px) {
   .place-an-order__cta {
      grid-column: 3;
      margin-top: -14px
   }
}

.place-an-order__mark {
   position: relative;
   height: 11px;
   width: 33px;
   margin: -13px 0 -5px
}

.place-an-order__mark:before,
.place-an-order__mark:after {
   content: "";
   position: absolute;
   background: var(--colorAccent_Dark)
}

.place-an-order__mark:before {
   top: -4px;
   bottom: -4px;
   left: 50%;
   width: 1px
}

.place-an-order__mark:after {
   top: 5px;
   left: 0;
   width: 33px;
   height: 1px
}

.place-an-order__send {
   max-width: 280px;
   column-gap: 16px
}

.place-an-order__send i {
   margin-top: -4px
}

.place-an-order__cta:before,
.place-an-order__cta:after,
.place-an-order__cta p:before,
.place-an-order__cta p:after {
   content: "";
   position: absolute;
   animation: glowPulse 9s linear infinite
}

.place-an-order__cta:before,
.place-an-order__cta p:before {
   width: calc(90% + 6px)
}

.place-an-order__cta:after,
.place-an-order__cta p:after {
   height: calc(90% + 12px)
}

.place-an-order__cta:before {
   top: 0;
   left: -6px;
   border-top: 1px solid var(--colorAccent_Dark)
}

.place-an-order__cta:after {
   top: -12px;
   left: 0;
   border-left: 1px solid var(--colorAccent_Dark)
}

.place-an-order__cta p:before {
   bottom: 0;
   right: -6px;
   border-bottom: 1px solid var(--colorAccent_Dark)
}

.place-an-order__cta p:after {
   bottom: -12px;
   right: 0;
   border-right: 1px solid var(--colorAccent_Dark)
}

.project-intro {
   margin-bottom: var(--textMargin_Mega);
   padding-top: clamp(44px, 7.9vw, 84px)
}

.project-intro.mod-cover {
   padding-top: clamp(15vh, 31.5vw, 25vh)
}

.project-intro__main {
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center
}

@media (min-width: 480px) {
   .project-intro__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .project-intro__main {
      grid-column: 1/span 8
   }
}

@media (min-width: 1000px) {
   .project-intro__main {
      grid-column: 1/span 6;
      padding-right: 72px
   }
}

@media (min-width: 1340px) {
   .project-intro__main {
      grid-column: 4/span 6;
      padding: 0
   }
}

.project-intro__main:after {
   content: "- - -";
   display: flex;
   height: 3px;
   margin: 1.35em 0 0 -.18em;
   line-height: 3px;
   font-size: var(--fontSize_H2);
   color: var(--colorGray_10)
}

.project-intro__title {
   margin-bottom: var(--textMargin_Base);
   line-height: var(--lineHeight_H1);
   font-size: var(--fontSize_H1);
   color: var(--colorSpec);
   text-transform: capitalize
}

@media (min-width: 480px) {
   .project-intro__title:before {
      content: "/";
      margin: 0 .6em 0 -1.224em;
      color: var(--colorAccent)
   }
}

@media (min-width: 1340px) {
   .project-intro__title:before {
      color: var(--colorGray_10)
   }
}

.project-intro__info {
   color: var(--colorGray_50)
}

.project-intro__info time {
   color: var(--colorGray_40)
}

.project-intro__type {
   order: -1;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent)
}

.project-intro__intro {
   margin-top: var(--textMargin_Plus);
   color: var(--colorGray_40)
}

.project-intro__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: -10;
   height: 80vh;
   min-height: 720px
}

.project-intro__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.project-intro__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

@media (min-width: 1340px) {
   .tech-specs {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 64px;
      padding-right: 64px
   }

   .tech-specs .header {
      grid-column: span 2
   }
}

.tech-specs__item {
   position: relative;
   display: flex;
   justify-content: space-between;
   padding: 11px 0;
   column-gap: 12px;
   border-bottom: 1px dashed var(--colorGray_05)
}

.tech-specs__item:before {
   content: "";
   position: absolute;
   top: 0;
   right: -12px;
   bottom: 0;
   left: -12px;
   z-index: -10
}

@media screen and (hover: hover) {
   .tech-specs__item:hover:before {
      background: var(--colorGray_05)
   }
}

.tech-specs__item:focus:before,
.tech-specs__item:active:before {
   background: var(--colorGray_05)
}

.tech-specs__name {
   flex-shrink: 0;
   min-width: 180px
}

.tech-specs__data {
   text-align: right;
   color: var(--colorWhite)
}

.tech-specs__data a {
   margin: -4px 0;
   padding: 4px 0;
   color: var(--colorAccent);
   text-decoration: underline;
   transition: var(--transition_Text)
}

@media screen and (hover: hover) {
   .tech-specs__data a:hover {
      color: var(--colorInvert)
   }
}

.tech-specs__data a:focus,
.tech-specs__data a:active {
   color: var(--colorInvert)
}