@font-face {
  font-family: 'OpenSans-CondLight';
  src: url('../fonts/OpenSans-CondLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Uniwars';
  src: url('../fonts/uniwarsbl-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: rgba(0, 0, 0, 0.930);
  color: #fff;
  font-family: "OpenSans-CondLight", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><line x1='0' y1='16' x2='32' y2='16' stroke='yellow' stroke-width='1'/><line x1='16' y1='0' x2='16' y2='32' stroke='yellow' stroke-width='1'/><circle cx='16' cy='16' r='2' fill='gray'/></svg>") 16 16, crosshair;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 60px;
  right: 60px;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) calc((100% / 12) - 10px),
    transparent calc((100% / 12) - 10px),
    transparent calc(100% / 12)
  );
  background-size: 100% 100%;
  border-left: 2px solid rgba(49, 47, 47, 0.03);
  border-right: 2px solid rgba(49, 47, 47, 0.03);
}
.cyber-cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
}
/* Добавьте это в CSS */
.cyber-cursor .inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; /* Размер внутреннего круга */
  height: 30px; /* Размер внутреннего круга */
  background: rgba(255, 221, 0, 0.42); /* Цвет внутренней области с прозрачностью */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; /* Помещаем за другими элементами */
}
.cyber-cursor .outer-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(251, 255, 41, 0.7);
  border-radius: 50%;
  box-sizing: border-box;
}
.cyber-cursor .inner-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(251, 255, 41, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cyber-cursor .crosshair-h {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 4px;
  height: 1px;
  background: rgb(251, 255, 41, 0.9);
  transform: translateY(-50%);
}
.cyber-cursor .crosshair-h-right {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 4px;
  height: 1px;
  background: rgb(251, 255, 41, 0.9);
  transform: translateY(-50%);
}
.cyber-cursor .crosshair-v {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 1px;
  height: 4px;
  background: rgb(251, 255, 41, 0.9);
  transform: translateX(-50%);
}
.cyber-cursor .crosshair-v-bottom {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 1px;
  height: 4px;
  background: rgb(251, 255, 41, 0.9);
  transform: translateX(-50%);
}
.cube-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  z-index: 1;
  pointer-events: none;
}
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
}
.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #8a2be2, #4b0082);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 30px rgba(150, 0, 255, 0.7),
              0 0 30px rgba(150, 0, 255, 0.5);
  opacity: 0.8;
}
.cube-face-front  { transform: translateZ(100px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(100px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(100px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(100px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(100px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(100px); }

.cube-container, .cube, .cube-face {
  transition: all 0.3s ease !important;
}

#gridCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  display: block;
  background-color: transparent;
}
.content {
  position: relative;
  width: 100%;
  z-index: 10;
}
.accent {
  color: rgba(255, 149, 0, 0.89);
}
.text-animated {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.text-animated.visible {
  opacity: 1;
  transform: translateY(0);
}
.typewriter {
  overflow: hidden;
  border-right: 2px solid rgba(255, 149, 0, 0.89);
  white-space: normal;
  word-wrap: break-word;
  animation: blink-caret 0.75s step-end infinite;
  opacity: 0;
}
.typewriter.animating {
  opacity: 1;
}
.typewriter.finished {
  border-right: none;
}
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2.0s ease, transform 0.8s ease;
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: rgba(255, 149, 0, 0.89); }
}
.fade-in {
  opacity: 0;
  transition: opacity 2s ease-out;
}
.fade-in.show {
  opacity: 1;
}
.text-header {
  font-size: clamp(18px, calc(16px + 0.3vw), 24px);
  text-align: center;
  margin: 60px 20px 20px;
  color: rgba(255, 149, 0, 0.826);
  font-family: 'OpenSans-CondLight', sans-serif;
}
.text-intro {
  font-size: clamp(16px, calc(14px + 0.3vw), 22px);
  text-align: center;
  padding: 10px 5vw 20px;
  color: rgba(253, 216, 193, 0.628);
  font-family: 'OpenSans-CondLight', sans-serif;
}
.text-details {
  font-size: clamp(14px, calc(12px + 0.25vw), 20px);
  text-align: center;
  padding: 0 5vw 60px;
  color: rgba(253, 216, 193, 0.667);
  font-family: 'OpenSans-CondLight', sans-serif;
}
.hero-section {
  position: relative;
  width: calc(100% - 120px);
  margin: 20px auto 0;
  max-width: 2800px;
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 42.25%;
  overflow: hidden;
  border-radius: 0px;
  z-index: 5;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid rgba(41, 38, 36, 0.856);
  opacity: 0;
  transition: opacity 1s ease;
  cursor: none;
  z-index: 5;
}
.hero-video.loaded {
  opacity: 1;
}
.hero-overlay-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important; /* Убираем возможные внутренние отступы */
  margin: 0 !important; /* Убираем возможные внешние отступы */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
}
.hero-overlay-image {
  width: clamp(100px, 4vw, 350px) !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 0.9 !important;
  cursor: none !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 50px !important; /* Фиксированный отступ вместо clamp() */
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 11 !important;
  transform: none !important;
}
.new-video-texts {
  text-align: center;
  margin: 20px auto;
  max-width: clamp(320px, calc(900px + 0.15 * (100vw - 1920px)), 1300px);
  position: relative;
  z-index: 7;
}
.new-video-text-header {
  font-size: clamp(24px, calc(20px + 0.4vw), 36px);
  margin: 20px 20px 10px;
  text-align: center;
  color: rgba(255, 149, 0, 0.826);
  font-family: 'OpenSans-CondLight', sans-serif;
}
.new-video-text-intro {
  font-size: clamp(16px, calc(14px + 0.45vw), 32px);
  padding: 10px 5vw 20px;
  color: rgba(253, 216, 193, 0.628);
  font-family: 'OpenSans-CondLight', sans-serif;
  margin-bottom: calc(0px + (100vw - 1920px) * 0.02);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 2vw, 80px);
  padding-top: calc(300px + (100vw - 1920px) * 0.035);
  padding-bottom: clamp(150px, 10vw, 300px);
  padding-left: clamp(15px, 2.5vw, 5vw);
  padding-right: clamp(15px, 2.5vw, 5vw);
  max-width: clamp(1000px, 85vw, 2200px);
  margin: 0 auto;
}
.service-block {
  background: rgba(37, 0, 54, 0.3);
  border: 2px solid rgba(255, 149, 0, 0.3);
  padding: clamp(20px, 1.5vw, 30px);
  text-align: center;
  transition: all 0.3s ease;
  transform-origin: center;
}
.service-block:hover {
  border-color: rgba(255, 149, 0, 0);
}
.service-block.image-block {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-block.image-block .image-container {
  position: relative;
  width: 100%;
  border: 10px solid rgba(41, 38, 36, 0.808);
  overflow: hidden;
  margin: 0 auto;
}
.service-block.image-block .image-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-block.image-block:hover .image-link {
  pointer-events: auto;
  opacity: 1;
}
.service-block.image-block .image-main,
.service-block.image-block .image-hover {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-block.image-block .image-main {
  position: relative;
  opacity: 1;
  transform: translateX(0) translateY(0);
}
.service-block.image-block .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-sizing: border-box;
}
.service-block.image-block.block-1 .image-hover {
  transform: translateX(-30px);
}
.service-block.image-block.block-4 .image-hover {
  transform: translateX(30px);
}
.service-block.image-block.block-5 .image-hover {
  transform: translateY(-30px);
}
.service-block.image-block.block-8 .image-hover {
  transform: translateY(30px);
}
.service-block.image-block:hover .image-main {
  opacity: 0;
}
.service-block.image-block:hover .image-hover {
  opacity: 1;
  transform: translateX(0) translateY(0);
}
.service-block.text-block h3 {
  font-size: clamp(18px, calc(16px + 0.25vw), 22px);
  color: rgba(255, 149, 0, 0.826);
  margin-bottom: 20px;
  font-family: 'OpenSans-CondLight', sans-serif;
  opacity: 0;
}
.service-block.text-block p {
  font-size: clamp(14px, calc(12px + 0.25vw), 18px);
  color: rgba(253, 216, 193, 0.667);
  font-family: "Calibri Light", sans-serif;
  line-height: 1.6;
  opacity: 0;
}
.block-1 {
  transform: scale(1);
  padding: 1px;
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
}
.block-2 {
  transform: scale(1);
  background: rgba(46, 0, 65, 0);
  border-color: rgba(56, 54, 50, 0);
  text-align: left;
}
.block-3 {
  transform: scale(1);
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
  text-align: left;
}
.block-4 {
  transform: scale(1);
  padding: 1px;
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
}
.block-5 {
  transform: scale(1);
  padding: 1px;
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
}
.block-6 {
  transform: scale(1);
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
  text-align: left;
}
.block-7 {
  transform: scale(1);
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
  text-align: left;
}
.block-8 {
  transform: scale(1);
  padding: 1px;
  background: rgba(46, 0, 65, 0);
  border-color: rgba(255, 149, 0, 0);
  margin-bottom: calc(180px + (100vw - 1920px) * 0.02);
}

.benefits {
  padding: 80px 5vw;
  text-align: center;
  margin-top: 0px;
  margin-bottom: calc(280px + (100vw - 1920px) * 0.02);
}

/* Стили для блока регистрации */
.benefits .register {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 40px;
  padding: 20px;
  border: 4px solid rgba(62, 53, 40, 0.724);
  color: rgba(253, 216, 193, 0.667);
  font-family: "Calibri Light", sans-serif;
  background: #250036;
}

/* Заголовок регистрации (крупнее) */
.benefits .register .register-title {
  font-size: clamp(18px, calc(16px + 0.3vw), 24px);
  line-height: 1.3;
  display: block;
  margin-bottom: 5px;
}

/* Подзаголовок регистрации (мельче) */
.benefits .register .register-subtext {
  font-size: clamp(14px, calc(12px + 0.25vw), 16px);
  line-height: 1.4;
  color: rgba(253, 216, 193, 0.667);
  text-align: center;
}

.benefits .row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.benefits .block {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border: 4px solid rgba(62, 53, 40, 0.724);
  color: rgba(253, 216, 193, 0.667);
  font-family: "Calibri Light", sans-serif;
  background: #250036;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* Заголовок блока (крупнее) */
.benefits .block .block-title {
  font-size: clamp(16px, calc(14px + 0.3vw), 20px);
  line-height: 1.3;
  display: block;
  margin-bottom: 5px;
}

/* Подзаголовок блока (мельче) */
.benefits .block .block-subtext {
  font-size: clamp(14px, calc(12px + 0.25vw), 16px);
  line-height: 1.4;
  color: rgba(253, 216, 193, 0.667);
}

.benefits .block.show {
  opacity: 1;
}

/* ДОПОЛНИТЕЛЬНЫЙ ФИКС для одинакового масштабирования */
.benefits .register .register-subtext,
.benefits .block .block-subtext {
  will-change: font-size;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.footer {
  padding: 60px 20px;
  text-align: center;
}
.footer .logo-bg {
  width: 100%;
  height: clamp(400px, calc(45px + 0.37 * 100vw), 1500px);
  min-height: clamp(400px, calc(45px + 0.37 * 100vw), 1500px);
  background: #250036b1;
  margin: 60px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .company-name {
  font-family: "Uniwars", sans-serif;
  font-size: clamp(98px, calc(88px + 3vw), 380px);
  color: rgba(253, 216, 193, 0.667);
  text-align: center;
  line-height: 1.2;
}
.footer .final-text {
  font-size: clamp(14px, calc(12px + 0.2vw), 18px);
  max-width: clamp(600px, 60vw, 850px);
  font-family: "Calibri Light", sans-serif;
  color: rgba(253, 216, 193, 0.667);
  margin: 40px auto 0;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.footer .final-text.show {
  opacity: 1;
}
.buttons-container {
  position: fixed;
  left: clamp(20px, 3vw, 50px) + 50px;
  bottom: clamp(20px, 2vw, 50px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 20px);
  z-index: 15;
}
.button {
  padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2.4vw, 24px);
  background: rgba(62, 65, 23, 0.395);
  color: rgb(255, 248, 41);
  text-decoration: none;
  border-radius: clamp(3px, 0.3vw, 5px);
  border: clamp(3px, 0.3vw, 5px) solid rgb(23, 23, 23);
  outline: clamp(1px, 0.1vw, 2px) solid hsl(59, 36%, 24%);
  font-family: 'Calibri', sans-serif;
  font-size: clamp(12px, 0.7vw, 14px);
  transition: all 0.3s ease;
  min-height: clamp(36px, 2.5vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button:hover {
  background: rgb(255, 248, 41);
  color: hsl(0, 0%, 0%);
  border: clamp(3px, 0.3vw, 5px) solid rgb(23, 23, 23);
  outline: clamp(1px, 0.1vw, 2px) solid hsl(59, 36%, 24%);
}

/* Гарантированное сохранение размеров шрифтов */
.service-block.text-block h3,
.service-block.text-block p {
  will-change: font-size;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Для анимации видимости без влияния на размеры */
.service-block.text-block h3,
.service-block.text-block p {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.service-block.text-block h3.visible,
.service-block.text-block p.visible {
  opacity: 1 !important;
  transition: none !important;
}

/* Фикс для блоков преимуществ */
.benefits .block .block-title,
.benefits .block .block-subtext,
.benefits .register .register-title,
.benefits .register .register-subtext {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.active {
  display: block;
  opacity: 1;
}
.modal-content {
  position: fixed;
  top: 9%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hsl(32, 100%, 94%);
  padding: 20px;
  border: 2px solid rgba(152, 142, 156, 0.712);
  border-radius: 10px;
  width: 300px;
  text-align: center;
  color: rgba(0, 0, 0, 0.667);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  font-family: 'Calibri Light', sans-serif;
}
.modal.active .modal-content {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5em;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.667);
}
.modal-content h3 {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.712);
}
.modal-content input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid rgba(86, 86, 86, 0.671);
  border-radius: 5px;
  background: rgb(255, 255, 255);
  color: #000000;
}
.modal-content button {
  padding: 10px 20px;
  background: rgb(214, 204, 194);
  border: none;
  border-radius: 5px;
  color: #000000d0;
  cursor: pointer;
  font-size: 14px;
}
.modal-content button:hover {
  background: rgb(255, 248, 41);
  color: hsl(0, 0%, 0%);
  font-size: 14px;
}
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-block.text-block h3 {
    font-size: clamp(18px, calc(16px + 0.35vw), 22px);
  }
  .service-block.text-block p {
    font-size: clamp(14px, calc(12px + 0.3vw), 18px);
  }
  .new-video-text-header,
  .new-video-text-intro {
    font-size: clamp(18px, calc(16px + 0.35vw), 24px);
  }
}
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  
  .content, .hero-section, .services-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .cyber-cursor, .cube-container, #gridCanvas {
    display: none !important;
  }
  
  .fade-in, .fade-up, .typewriter {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    padding-top: 150px !important;
  }
  
  .service-block.text-block h3 {
    font-size: clamp(18px, calc(16px + 0.5vw), 22px) !important;
  }
  
  .service-block.text-block p {
    font-size: clamp(14px, calc(12px + 0.4vw), 18px) !important;
  }
  
  .new-video-text-header {
    font-size: clamp(24px, calc(20px + 0.7vw), 32px) !important;
  }
  
  .new-video-text-intro {
    font-size: clamp(16px, calc(14px + 0.6vw), 22px) !important;
  }
  
  .text-header { 
    font-size: clamp(18px, calc(16px + 0.7vw), 24px) !important; 
  }
  
  .text-intro { 
    font-size: clamp(16px, calc(14px + 0.6vw), 22px) !important; 
  }
  
  .text-details { 
    font-size: clamp(14px, calc(12px + 0.5vw), 20px) !important; 
  }
  
  .footer .company-name { 
    font-size: clamp(32px, calc(28px + 0.9vw), 60px) !important; 
  }
  
  .button {
    min-height: 48px !important;
    padding: 15px 0 !important;
    font-size: clamp(14px, calc(12px + 0.4vw), 16px) !important;
  }
  
  .buttons-container {
    position: static !important;
    width: 100% !important;
    padding: 15px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .benefits .register, .benefits .block {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto 20px !important;
  }
  
  .modal-content {
    width: 90% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Стили для выпадающего списка */
#userType {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.671);
  border-radius: 5px;
  background: rgb(255, 255, 255);
  color: #000000;
  font-family: 'Calibri Light', sans-serif;
  font-size: 14px;
}

#userType:focus {
  outline: none;
  border-color: rgb(45, 45, 45);
}

#userType option {
  background: white;
  color: black;
}

/* Стили для кнопки регистрации */
.register-button {
  padding: 10px 20px;
  background: rgba(62, 65, 23, 0.395);
  color: rgb(255, 248, 41);
  text-decoration: none;
  border-radius: 0 20px 0 15px;
  border: 5px solid rgb(23, 23, 23);
  outline: 2px solid hsl(59, 36%, 24%);
  font-family: 'Calibri', sans-serif;
  font-size: clamp(12px, calc(10px + 0.2vw), 14px);
  transition: background 0.3s ease;
  cursor: pointer;
}

.register-button:hover {
  background: rgb(255, 248, 41);
  color: hsl(0, 0%, 0%);
  border: 5px solid rgb(23, 23, 23);
  outline: 2px solid hsl(59, 36%, 24%);
}

/* Стили для закрывающей кнопки регистрации */
.register-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5em;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

/* Стили для кнопок "Получить код" */
#sendLoginCodeBtn,
#sendRegisterCodeBtn {
  background: rgba(123, 123, 123, 0.258);
  border: 1px solid #43434300;
  color: rgba(0, 0, 0, 0.811);
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  margin: 10px 0;
  width: 100%;
}

#sendLoginCodeBtn:hover,
#sendRegisterCodeBtn:hover {
  background: rgb(255, 248, 41);
  transform: translateY(-2px);
}

#sendLoginCodeBtn:active,
#sendRegisterCodeBtn:active {
  transform: translateY(0);
}

#loginForm,
#registerForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#loginForm input,
#registerForm input,
#registerForm select {
  padding: 12px;
  border: 1px solid rgb(154, 154, 154);
  border-radius: 4px;
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  font-size: 14px;
}

#loginForm input:focus,
#registerForm input:focus,
#registerForm select:focus {
  outline: none;
  border-color: #7d7d7d;
  box-shadow: 0 0 8px rgba(251, 255, 41, 0);
}

#registerForm select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Контейнер для кнопки "Контакты" внизу страницы */
.bottom-contact-container {
  position: fixed;
  bottom: clamp(20px, 2vw, 50px);
  left: clamp(0px, 3vw, 0px);
  z-index: 1000;
  width: clamp(200px, 80vw, 300px);
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Стили для кнопки "Контакты" внизу */
.contacts-button {
  width: auto;
  min-width: 120px;
  max-width: 300px;
  height: auto;
  min-height: 40px;
  max-height: 60px;
  padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2.4vw, 24px);
  font-size: clamp(12px, 0.7vw, 14px);
  border-radius: clamp(3px, 0.3vw, 5px);
}

/* Для мобильных устройств */
@media (max-width: 768px) {
  .bottom-contact-container {
    bottom: 15px !important;
    width: 90% !important;
  }
  
  .contacts-button {
    font-size: clamp(16px, 2.5vw, 18px) !important;
    padding: 15px 0 !important;
    min-height: 56px !important;
  }
}

/* ====== ТЕТРИС-БЛОК ОТ ВЕРХА ЭКРАНА ДО НИЗА ВИДЕО ====== */
.tetris-block {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100vw;
  /* КРИТИЧЕСКИ ВАЖНО: высота = высота видео + отступы */
  height: calc(
    450px + /* margin-top .hero-section */
    42.25vw /* padding-bottom .video-wrapper (соотношение 16:9) */
  );
  background: rgb(165, 80, 0);
  z-index: 0; /* Должен быть ПОД видео (z-index:5) */
  
  /* ТЕТРИС-ЭФФЕКТ ТОЛЬКО В НИЖНЕМ КРАЕ */
  clip-path: polygon(
    0% 0%, 
    100% 0%,
    100% 100%,
    98% 100%, 98% 92%, /* Очень низкий островок (8%) */
    95% 92%, 95% 100%,
    
    92% 100%, 92% 87%, /* Средний островок (13%) */
    88% 87%, 88% 100%,
    
    85% 100%, 85% 95%, /* Очень низкий (5%) */
    83% 95%, 83% 100%,
    
    /* Группа 2 - средние островки */
    80% 100%, 80% 85%, /* Средний (15%) */
    77% 85%, 77% 90%,  /* Еще ниже (10%) */
    74% 90%, 74% 100%,
    
    71% 100%, 71% 88%, /* Средний (12%) */
    68% 88%, 68% 100%,
    
    /* Группа 3 - хаотичные островки */
    65% 100%, 65% 93%, /* Низкий (7%) */
    63% 93%, 63% 85%,  /* Выше среднего (15%) */
    60% 85%, 60% 90%,  /* Низкий (10%) */
    57% 90%, 57% 100%,
    
    54% 100%, 54% 87%, /* Средний (13%) */
    52% 87%, 52% 100%,
    
    /* Группа 4 - низкие островки */
    49% 100%, 49% 95%, /* Очень низкий (5%) */
    47% 95%, 47% 90%,  /* Низкий (10%) */
    44% 90%, 44% 100%,
    
    41% 100%, 41% 92%, /* Очень низкий (8%) */
    38% 92%, 38% 100%,
    
    /* Группа 5 - редкие высокие */
    35% 100%, 35% 83%, /* Высокий (17%) */
    33% 83%, 33% 88%,  /* Ниже среднего (12%) */
    30% 88%, 30% 100%,
    
    27% 100%, 27% 90%, /* Низкий (10%) */
    24% 90%, 24% 100%,
    
    /* Группа 6 - хаотичные мелкие */
    21% 100%, 21% 94%, /* Очень низкий (6%) */
    19% 94%, 19% 87%,  /* Средний (13%) */
    16% 87%, 16% 92%,  /* Низкий (8%) */
    13% 92%, 13% 100%,
    
    10% 100%, 10% 95%, /* Очень низкий (5%) */
    7% 95%, 7% 100%,
    
    /* Группа 7 - завершающие островки */
    4% 100%, 4% 98%,   /* Средний (15%) */
    2% 98%, 2% 95%,    /* Низкий (10%) */
    0% 95%, 0% 100%
  );
}

/* Для мобильных - упрощенная версия с естественными уровнями */
@media (max-width: 768px) {
  .tetris-block {
    clip-path: polygon(
      0% 0%, 100% 0%, 100% 100%,
      /* Упрощенные островки с разными уровнями */
      95% 100%, 95% 90%,
      90% 90%, 90% 100%,
      
      85% 100%, 85% 85%,
      80% 85%, 80% 95%,
      75% 95%, 75% 100%,
      
      70% 100%, 70% 92%,
      65% 92%, 65% 88%,
      60% 88%, 60% 95%,
      55% 95%, 55% 100%,
      
      50% 100%, 50% 90%,
      40% 90%, 40% 100%,
      
      35% 100%, 35% 87%,
      30% 87%, 30% 93%,
      25% 93%, 25% 100%,
      
      20% 100%, 20% 95%,
      15% 95%, 15% 85%,
      10% 85%, 10% 92%,
      5% 92%, 5% 100%,
      
      0% 100%, 0% 90%
    );
  }
}

.tetris-block-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 200px;
  background: rgb(165, 80, 0);
  z-index: 1; /* Увеличил z-index для гарантии видимости поверх всех элементов */
  clip-path: polygon(
    0% 100%, 
    100% 100%,
    100% 0%,
    98% 0%, 98% 8%,
    95% 8%, 95% 0%,
    
    92% 0%, 92% 13%,
    88% 13%, 88% 0%,
    
    85% 0%, 85% 5%,
    83% 5%, 83% 0%,
    
    80% 0%, 80% 15%,
    77% 15%, 77% 10%,
    74% 10%, 74% 0%,
    
    71% 0%, 71% 12%,
    68% 12%, 68% 0%,
    
    65% 0%, 65% 7%,
    63% 7%, 63% 15%,
    60% 15%, 60% 10%,
    57% 10%, 57% 0%,
    
    54% 0%, 54% 13%,
    52% 13%, 52% 0%,
    
    49% 0%, 49% 5%,
    47% 5%, 47% 10%,
    44% 10%, 44% 0%,
    
    41% 0%, 41% 8%,
    38% 8%, 38% 0%,
    
    35% 0%, 35% 17%,
    33% 17%, 33% 12%,
    30% 12%, 30% 0%,
    
    27% 0%, 27% 10%,
    24% 10%, 24% 0%,
    
    21% 0%, 21% 6%,
    19% 6%, 19% 13%,
    16% 13%, 16% 8%,
    13% 8%, 13% 0%,
    
    10% 0%, 10% 5%,
    7% 5%, 7% 0%,
    
    4% 0%, 4% 15%,
    2% 15%, 2% 10%,
    0% 10%, 0% 0%
  );
  pointer-events: none; /* Чтобы блок не перехватывал клики */
}

@media (max-width: 768px) {
  .tetris-block-bottom {
    clip-path: polygon(
      0% 100%, 100% 100%, 100% 0%,
      95% 0%, 95% 10%,
      90% 10%, 90% 0%,
      
      85% 0%, 85% 15%,
      80% 15%, 80% 5%,
      75% 5%, 75% 0%,
      
      70% 0%, 70% 8%,
      65% 8%, 65% 12%,
      60% 12%, 60% 5%,
      55% 5%, 55% 0%,
      
      50% 0%, 50% 10%,
      40% 10%, 40% 0%,
      
      35% 0%, 35% 13%,
      30% 13%, 30% 7%,
      25% 7%, 25% 0%,
      
      20% 0%, 20% 5%,
      15% 5%, 15% 15%,
      10% 15%, 10% 8%,
      5% 8%, 5% 0%,
      
      0% 0%, 0% 10%
    );
  }
}

/* Добавляем отступ к контенту, чтобы текст не заезжал под блок */
.content {
  padding-bottom: 200px !important;
}

.buttons-container {
  transform: translateY(200px) !important;
  will-change: transform !important;
}

.new-video-texts {
  margin-top: 500px !important;
  position: relative !important;
  z-index: 7 !important;
}

/* Стили для миниатюр под видео */
.service-thumbnails-container {
  position: relative;
  width: 100%;
  padding-left: 0px;
  margin-top: 30px;
  z-index: 6;
}

.service-thumbnails {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  padding-bottom: 15px;
  scrollbar-width: none; /* Скрыть скроллбар в Firefox */
}

.service-thumbnails::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Chrome/Safari */
}

.thumbnail-link {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  display: block;
  border: 2px solid rgb(255, 149, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(37, 0, 54, 0.3);
  position: relative;
  transition: border-color 0.3s ease;
}

.thumbnail-link:hover {
  border-color: rgba(255, 149, 0, 0.8);
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  transform-origin: center;
  will-change: transform;
}

.thumbnail-link:hover .thumbnail {
  transform: scale(1.08);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .service-thumbnails-container {
    padding-left: 15px;
    margin-top: 10px;
  }
  
  .thumbnail-link {
    width: 130px;
    height: 170px;
  }
  
  .thumbnail {
    padding: 8px;
  }
}

/* Для фиксации позиции при прокрутке */
.hero-section {
  position: relative;
  z-index: 5;
}

/* Коррекция позиционирования кнопок (если нужно) */
.buttons-container {
  margin-top: 25px !important;
}