body {
  font-family: "Lato", sans-serif;
  margin: 0 auto;
  background: linear-gradient(145deg, #000000, #1c1411, #000000);  
  -webkit-font-smoothing: antialiased;
  min-height: 100vh
}

.container {
  max-width: 1300px;
  margin: 0 auto;
}

.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-header {
  height: 35px;
}
.header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo_box {
  display: flex;
  align-items: center;
}
.logo_desc {
  font-size: 15px;
  font-weight: 700;
  margin-left: 15px;
  width: 35%;
  line-height: 1.4; 
  color: #fff; 
}
.footer_text {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 50px;  
  margin-top: 20px;
}
.
.btn-phone,
.btn-telegram,
.btn-test {
  background: #d0e8f9;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.btn-telegram {
  text-decoration: none;
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  transition: .3s;
  background: #006494;
    border-radius: 5px;  
}
.btn-telegram:hover {
  background-color: #006494;
  color: #fff;
}


.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-img {
  width: 48%;
  border-radius: 10px;
}
.hero-img > img {
  width: 100%;
  border-radius: 10px;
}
.hero-img > video {
    border-radius: 10px;
    box-shadow: 0px 0px 20px 10px #33140b57;
}


.hero-content {
  width: 48%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}




footer {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
}

.hero-content h2 {
  font-size: 45px;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}

.subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #ffc803;
  line-height: 1.5;
}


footer {
  font-size: 14px;
  color: #666;
  margin-top: 40px;
}


.btn-test {
  font-size: 16px;
  font-weight: bold;
}
.btn {
  font-size: 18px;
  padding: 20px 0;
}
.desc {
margin-bottom: 40px;
color: #fff;
}
.desc > b {
  font-weight: 700;
  color: #ffc803;
}


 .btn-calc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ee4900 0%, #e9a600 100%);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 22px 52px;
    border-radius: 13px;
    text-decoration: none;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 16px rgba(44, 170, 81, 0.08);
    border-bottom: 5px solid #6c3200;
    transition: .3s;
    text-align: center;
    line-height: 1.2;
}
 .btn-calc:hover {
    background: linear-gradient(180deg, #ee4900 0%, #ff0000 100%); 
 }


.btn-calc__text {
  position: relative;
  z-index: 2;
}

.icon {
  margin-left: 18px;
  font-size: 28px;
  position: relative;
  z-index: 2;
}

.stripe {
  position: absolute;
  left: -60%;
  top: -50%;
  width: 60%;          /* Ширина смуги */
  height: 220%;
  background: linear-gradient(
    91deg,
    transparent 42%,
    rgba(255,255,255,0.6) 46%,
    #fff 50%,
    rgba(255,255,255,0.6) 54%,
    transparent 58%
  );
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.07));
  transform: rotate(16deg);
  z-index: 1;
  animation: stripe-move 2.5s linear infinite;
  pointer-events: none;
}

@keyframes stripe-move {
  0% { left: -60%; }
  100% { left: 100%; }
}

.btn-calc:hover .stripe {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity 0.25s;
}

h3 {
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.3;
}
p {
  font-size: 18px;
  line-height: 1.6;
  color: #e1e1e1;
  margin-bottom: 35px;
}
.story-container {
  padding: 0 25%;
  margin-top: 60px;
}
.img_story {
  width: 100%;
  margin-bottom: 35px;
  border-radius: 15px;
}
b {
    font-weight: 700;
    color: #fdc902;
}

h1 {
	font-size: 42px;
    color: #fff;
    line-height: 1.3;
    font-weight: 600;	
}
.button_box {
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.button_box {
  margin-top: 20px;
}

.btn1 > a > button {
    border-radius: 10px;
    padding: 16px 40px;
    font-weight: 700;
    font-size: 18px;
    border: 0;
    background: linear-gradient(180deg, #ee4900 0%, #e9a600 100%);
    color: #fff;   
    transition: .3s; 
}
.btn1 > a > button:hover {
    background: linear-gradient(180deg, #ee4900 0%, #ff0000 100%); 
}

.btn2 > a > button > img {
  height: 40px;
}  
.btn2 > a > button {
    background: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}  

.video_row {
     display: flex;
    align-items: center;
    gap: 30px; 
    margin-bottom: 40px;
}
.video_creatives {
  height: 550px;
}
.btn-calc2 {
  
}




@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-img,
  .hero-content {
    width: 100%;
  }

  .gallery-item {
    width: 48%;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .gallery-item {
    width: 100%;
    height: auto !important;  
  }
}

@media (max-width: 480px) {
  .btn-phone,
  .btn-telegram,
  .btn-test {
    width: 100%;
    justify-content: center;
  }

  .statistics {
    font-size: 16px;
  }

  .hero-content h2 {
    font-size: 18px;
  }

  .hero-content p {
    font-size: 16px;
  }
}


@media screen and (max-width: 1400px) {
  .container {max-width: 1250px;}
  .story-container {padding: 0 20%;}
} 

@media screen and (max-width: 1200px) {
  .container {max-width: 970px;}
  .hero-content h2 {font-size: 30px;}
  .gallery-item {height: 300px;}
  .btn-telegram {min-width: 160px;}
  .logo_desc {font-size: 14px;}
  .gallery-item {width: 31%;}
  .video_creatives {height: 500px;}

}

@media screen and (max-width: 992px) {
  .container {max-width: 750px;}
  .hero-content h2 {margin-top: 20px; text-align: center; font-size: 40px;}
  .subtitle {text-align: center;}
  .logo_desc {width: 55%;}
  .gallery-item {height: 250px;}
  .story-container {padding: 0;}
}

@media screen and (max-width: 767px) {
  .container {max-width: 370px;}
  .header_box {flex-wrap: wrap;}
  .logo_box {justify-content: space-between;}
  .header-buttons {margin-top: 35px; width: 100%;}
  .hero-content h2 {font-size: 27px;}
  .icon {display: none;}
  .statistics {font-size: 24px;}
  .gallery-item {width: 100%;}
  h3 {text-align: center; font-size: 33px;}
  .second_offer {font-size: 26px;}
  .video_creatives2 {display: none;}


}

@media screen and (max-width: 375px) {
  .container {max-width: none; padding: 0 10px;}
}