:root {
  --accent-color: #D3FF00;
  --bg: #F8F8F9;
  --dark: #161616;
  --base: #161616;
  --contrast: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --base: #F8F8F9;
    --contrast: #222222;
  }
}

/* Clear styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  outline: none !important;
  color: var(--base);
  line-height: 1.5;
}
ul, ol {list-style: none;}
svg, img {vertical-align: bottom;}

/* GRID	*/
.container {width: 100%; max-width: calc(100vw - 20px); margin: 0 auto; }

/* md планшеты */
@media (min-width: 720px) {
	.container{max-width: 90%; padding: 0;}
}

/* lg монитор ЭЛТ */
@media (min-width: 1024px) {
	.container {max-width: 1000px; }
}

/* Main Style */
@media screen and (max-width: 719px) {
  .sm-none {display: none!important;}
}
@media screen and (max-width: 999px) {
  .md-none {display: none!important;}
}
@media screen and (min-width: 1000px) {
  .lg-none {display: none!important;}
}

input::-moz-placeholder {color: #C9CBCF;}
input::-webkit-input-placeholder { color: #C9CBCF; }
input:-ms-input-placeholder { color: #C9CBCF; }
input::-ms-input-placeholder { color: #C9CBCF; }
input::placeholder { color: #C9CBCF; } 

body {background-color: var(--bg);}
.btn {display: inline-flex; justify-content: center; gap: 10px;  min-width: 248px; padding: 14px 14px 14px 4px; border-radius: 10px; color: var(--dark); background-color: var(--accent-color); font-size: 16px; line-height: 24px; font-weight: 900; text-decoration: none; transition: 0.2s;}
.btn:hover {transform: translateY(-3px); }

/* Header */
header nav{display: flex; justify-content: space-between; align-items: center; padding: 20px 10px;}
.logotype {display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.logotype a, .logotype span {font-size: 14px; line-height: 17px; text-transform: uppercase; font-style: italic; font-weight: 900; text-decoration: none;}
ul.social {display: flex; align-items: center; gap: 20px;}
li.social-item {display: flex; align-items: center; gap: 8px; position: relative;}
.social-icon {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--accent-color);}
.social-link {display: flex; flex-direction: column; gap: 4px}
.social-link a {display: block; text-decoration: none; font-size: 14px; line-height: 14px;}
.social-link a:before {content: ''; display: block; position: absolute; inset: 0; z-index: 1;}
.social-link span {font-size: 10px; line-height: 10px; opacity: 0.5;}
@media screen and (max-width: 420px) {
  ul.social {gap: 10px}
  ul.social li:nth-child(1) {gap:0}
  ul.social li:nth-child(1) .social-link {width:0; overflow: hidden;}
}
@media screen and (min-width: 1000px) {
  header nav {padding: 68px 40px 20px;}
  .barcode {flex: 1 1 100%; padding-left: 90px;}
  .barcode svg {fill: #DBDBDB;}
}
@media (prefers-color-scheme: dark) {
  .barcode svg {fill: #222222;}
}


/* Hero */
.hero {position: relative; z-index: 10;}
.hero-text {background-color: #222222; padding: 30px 20px 50px; border-radius: 20px; overflow: hidden;}
.hero-text p {color: #fff; font-size: 14px;}
h1 {text-align: center; font-size: 20px; line-height: 30px; font-weight: 900; color: var(--accent-color); margin-bottom: 10px;}
h1 span {display: block; font-weight: 900; color: #fff}
.hero-left svg {display: block; fill: #3D3D3D; margin: 0 auto;}
.hero-left p, .hero-right p {font-weight: 300; opacity: 0.5; text-align: center; margin-bottom: 30px;}
.hero-center {text-align: center;}
.hero-center picture img {display: block; width: 356px; margin: -80px auto -40px;}
.hero-center a.btn {margin-bottom: 12px;}
p.btn-desc {text-align: center; font-size: 14px; line-height: 21px; color: var(--accent-color)}
p.btn-desc span {display: block; font-size: 12px; color: #fff}
@media screen and (max-width: 719px) {
  .hero-center picture {display: block; margin: 0 -20px}
}
@media screen and (min-width: 1000px) {  
  .hero-text {display: flex; padding: 40px; justify-content: space-between; position: relative; overflow: visible; margin-bottom: 110px;}
  .hero-text:after {content: ''; display: block; width: 980px; height: 36px; position: absolute; bottom: -70px; left: 10px; background-image: url(/assets/pattern-arrow-gray.png);}
  .hero-left {flex: 0 0 250px;}
  .hero-left h1 {font-size: 16px; text-align: left;}
  .hero-left p {text-align: left; margin-bottom: 0px;}
  .hero-center {width: 590px; position: absolute; top: -100px; left: calc(50% - 295px); z-index: 2;}
  .hero-center picture img {width: 590px; margin: 0;}
  .hero-center img.coin-left {position: absolute; left: 0; top: 280px; animation: coin-left-move 12s infinite ease-in-out; }
  .hero-center img.coin-right {position: absolute; left: 420px; top: 70px; animation: coin-right-move 12s infinite ease-in-out;}
  .hero-content {position: absolute; top: 340px; left: calc(50% - 124px);}
  .hero-right {flex: 0 0 250px; position: relative; z-index: 3;}
  .hero-right p {text-align: right; margin-bottom: 20px;}
  .hero-right p.title {font-size: 16px; opacity: 1; font-weight: 900; margin-bottom: 10px;}
  ul.hero-tags {display: flex; justify-content: end; gap: 15px; margin-left: -120px;}
  ul.hero-tags li {display: flex; align-items: center; color: #fff; font-size: 14px; text-transform: uppercase; font-style: italic; }
  ul.hero-tags li svg {fill: var(--accent-color); margin-left: 15px;}
}
@media (prefers-color-scheme: dark) {
  .hero-text:after {background-image: url(/assets/pattern-arrow-accent.png);}
}

/* Slider */
.slider {position: relative; z-index: 20;}
.slider-wrap {display: flex; align-items: flex-start; gap: 10px;}
.slide {width: 232px; padding: 20px; background-color: #fff; border-radius: 20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.02);}
.slide-2, .slide-4 {margin-top: 30px;}
.slide-3 {margin-top: 60px;}
.slide h2 {font-size: 20px; line-height: 24px; font-weight: 900; color: var(--dark);}
.slide h2 + * {margin-top: 10px;}
.slide h3 {font-size: 14px; line-height: 18px; font-weight: 900; color: var(--dark);}
.slide h3 + * {margin-top: 10px;}
.slide p {font-size: 12px; line-height: 15px; color: var(--dark);}
.slide p + * {margin-top: 10px;}
.slide img {margin: 0 -10px; border-radius: 10px;}
.slide.slide-3 img {margin: -10px -10px -2px;}
.slide.slide-4 img {margin-top: -10px;}
.slide picture {display: block;}
.slide picture + * {margin-top: 10px;}
ul.reaction {display: flex; gap: 5px;}
li.reaction-item {display: block; color: var(--dark); background-color: #F5F5F5; font-size: 10px; line-height: 12px; padding: 2px 5px; border-radius: 8px;}
@media screen and (max-width: 999px) {
  .slider {margin: 20px 0; max-width: 100vw; overflow: hidden;} /* margin: -30px 0 */
  .slider-wrap {overflow-x: hidden; scroll-behavior: smooth; padding: 0 10px;}
}
@media screen and (min-width: 1000px) {
  .slider-wrap {margin: 0 -100px;}
}

/* CTA */
.cta-wrap {display: block; width: 100%; max-width: 720px; padding: 40px 20px; margin: 0px auto 20px; background-color: var(--contrast); border-radius: 20px;}
.cta-wrap h2 {font-size: 26px; line-height: 34px; margin-bottom: 10px; font-weight: 900; text-transform: uppercase;}
.cta-wrap p.cta-desc {font-size: 14px; opacity: 0.5; margin-bottom: 16px;}
@media screen and (max-width: 719px) {
  .cta-wrap h2, .cta-wrap p {text-align: center; }
  .cta-img picture {position: relative; z-index: 2;}
  .cta-img {display: flex; width: 210px; height: 192px; margin: 0 auto 20px; position: relative;}
  .cta-img::before {content: ''; display: block; width: 176px; height: 176px; border-radius: 50%; background-color: var(--accent-color); position: absolute; top: calc(50% - 88px); left: calc(50% - 88px); z-index: 1;}
}
@media screen and (min-width: 720px) {
  .cta-wrap {position: relative; padding: 40px 320px 40px 40px; margin-top: -30px}
  .cta-wrap h2 {font-size: 30px; line-height: 36px;}
  .cta-img {position: absolute; right: -10px; top: -10px;}
}

/* Footer */
footer {padding-bottom: 20px!important;}
footer p {font-size: 12px; opacity: 0.5; text-align: center;}
@media screen and (max-width: 719px) {
  footer p + * {margin-top: 5px;}
}
@media screen and (min-width: 720px) {
  footer {display: flex; justify-content: center; gap: 30px;}
}

/* Анимация колебательного движения по горизонтали */
@keyframes coin-left-move {
  0% {
    transform: translateX(0); /* Начальная позиция */
  }
  50% {
    transform: translateX(20px) translateY(20px); /* Сдвиг на 20 пикселей вправо */
  }
  100% {
    transform: translateX(0); /* Возвращение в начальную позицию */
  }
}

@keyframes coin-right-move {
  0% {
    transform: translateX(0); /* Начальная позиция */
  }
  50% {
    transform: translateX(-20px) translateY(-20px); /* Сдвиг на 20 пикселей вправо */
  }
  100% {
    transform: translateX(0); /* Возвращение в начальную позицию */
  }
}