@font-face {
  font-family: "Days One";
  src: url("/h1cc1f058-daysone_regular.woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Montserrat";
  src: url("/h1cc1f058-montserrat_medium.woff2");
  font-display: swap;
  font-weight: 500;
}

@font-face {
  font-family: "Montserrat";
  src: url("/h1cc1f058-montserrat_bold.woff2");
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: "Unbounded";
  src: url("/h1cc1f058-unbounded_bold.woff2");
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: "Unbounded";
  src: url("/h1cc1f058-unbounded_extrabold.woff2");
  font-display: swap;
  font-weight: 800;
}

/* ===== Переменные ===== */
:root {
  --container-width: 1240px;
  --container-step: 20px;
  --container-step-tablet: 18px;
  --container-step-mobile: 16px;
  --container: calc(var(--container-width) + (var(--container-step) * 2));
  --font-family: "Montserrat", sans-serif;
  --second-family: "Unbounded", sans-serif;
  --third-family: "Days One", sans-serif;
}

/* ===== Базовые ===== */
body {
  margin: 0;
  background: #e1f9f9;
}

.h1cc1f058-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-step);
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .h1cc1f058-container {
    padding: 0 var(--container-step-tablet);
  }
}

@media (max-width: 600px) {
  .h1cc1f058-container {
    padding: 0 var(--container-step-mobile);
  }
}

h1 {
  font-family: var(--second-family);
  font-weight: 800;
  font-size: 48px;
  text-transform: capitalize;
  color: #20344f;
  margin: 0px;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 44px;
    margin: 0px;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 40px;
    margin: 0px;
  }
}

h2 {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 40px;
  text-transform: capitalize;
  text-align: center;
  color: #20344f;
  margin: 0px;
}

@media (max-width: 991px) {
  h2 {
    font-size: 34px;
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 28px;
  }
}

h3 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  text-transform: capitalize;
  text-align: center;
  color: #020d1c;
  margin: 0px;
}

@media (max-width: 991px) {
  h3 {
    font-size: 19px;
  }
}

@media (max-width: 600px) {
  h3 {
    font-size: 18px;
  }
}

p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  color: rgba(2, 13, 28, 0.8);
  margin: 0px;
}

@media (max-width: 991px) {
  p {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: unset;
}

img{
  max-width: 100%;
  min-width: 0px;
}

section {
  padding: 40px 0px;

}

@media (max-width: 600px) {
  section {
    padding: 20px 0px;
  }
}

.h1cc1f058-btn{
  height: 51px;
  width: 100%;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  color: #fff;
  box-shadow: 0 4px 12px 0 rgba(1, 1, 11, 0.15);
  background: #fe690e;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  border-radius: 10px;
}

.h1cc1f058-site-header{
  background: rgba(0, 96, 228, 0.8);
  padding: 26px 0px;
}

.h1cc1f058-site-header.h1cc1f058-absolute{
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
}

.h1cc1f058-header-container{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.h1cc1f058-header_wrapper{
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

.h1cc1f058-header_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 747px;
  flex-wrap: wrap;
}

.h1cc1f058-nav-list{
  flex-direction: row;
  gap: 30px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.h1cc1f058-nav-link.h1cc1f058-active{
  color: #fff;
  font-weight: 700;
}

.h1cc1f058-nav-link:hover{
  color: #fff;
  font-weight: 700;
}

.h1cc1f058-age-notice{
  display: flex;
  align-items: center;
  gap: 20px;
}

.h1cc1f058-age-badge{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  color: #fff;
}

.h1cc1f058-age-text{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  text-align: right;
  color: #fff;
}

.h1cc1f058-hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px; /* spacing between lines */
  display: none;
  z-index: 1000;
}

.h1cc1f058-hamburger span {
  display: block;
  height: 2px;
  width: 28px;
  background: white;
  border-radius: 2px;
  margin: 0 auto; /* center lines horizontally */
}

.h1cc1f058-hero_section{
  padding-top: 200px;
  padding-bottom: 120px;
  background: url("/h1cc1f058-hero_bg.webp");
  background-size: cover;
  background-position: center;
}

.h1cc1f058-hero_content{
  max-width: 715px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 24px;
}

.h1cc1f058-hero_description{
  font-size: 18px;
}

.h1cc1f058-hero_CTA{
  max-width: 246px;
}





.h1cc1f058-benefits-section{
  background: #fff;
}

.h1cc1f058-benefits-section__container{
  gap: 20px;
}

.h1cc1f058-benefits-list{
  flex-direction: row;
  gap: 20px;
}

.h1cc1f058-benefits-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.h1cc1f058-benefits-item__content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.h1cc1f058-games_section{
  background: linear-gradient(180deg, #fff 0%, #8dd1ff 30%, #8dd1ff 70%, #fff 100%);
}

.h1cc1f058-games_section .h1cc1f058-notice-card{
  margin-bottom: 40px;
}

.h1cc1f058-games_section .h1cc1f058-container{
  display: block;
}

.h1cc1f058-games_section h2{
  margin-bottom: 40px;
}

.h1cc1f058-games_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.h1cc1f058-game-card {
  border-radius: 12px;
  padding: 20px;
  max-width: 295px;
  box-shadow: 0 4px 8px 0 rgba(14, 47, 89, 0.1);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.h1cc1f058-game-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 10px;
}

.h1cc1f058-game-card__header {
  display: flex;
  align-items: start;
  gap: 20px;
  justify-content: space-between;
}

h3.h1cc1f058-game-card__title {
  text-align: start;
}

.h1cc1f058-game-card__likes {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  color: rgba(2, 13, 28, 0.8);
}

.h1cc1f058-game-card__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1cc1f058-game-card__rating {
  flex-direction: row;
  gap: 4px;
}

.h1cc1f058-game__iframe{
  aspect-ratio: 1220 / 697;
  width: 100%;
  border-radius: 12px;
  border: 0px;
}





.h1cc1f058-about-section{
  background: #fff;
}

.h1cc1f058-about-section__container{
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}

.h1cc1f058-about-section__image{
  flex: 1;
  width: 100%;
}

.h1cc1f058-about-section__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: start;
}

.h1cc1f058-about-section__textcontent{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 14px;
}

.h1cc1f058-about-section__title{
  text-align: start;
}

.h1cc1f058-raiting{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 14px;
  height: 100%;
}

.h1cc1f058-raiting-title{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 28px;
  text-transform: capitalize;
  color: #020d1c;
}

.h1cc1f058-raiting-list{
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.h1cc1f058-raiting-list li{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.h1cc1f058-place{
  width: 80px;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 48px;
  line-height: 90%;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}

.h1cc1f058-first_place{
  background: #ffa100;
  border: 1px solid #e39308;
}

.h1cc1f058-second_place{
  background: #a8a8a8;
  border: 1px solid #969696;
}

.h1cc1f058-third_place{
  background: #0951ff;
  border: 1px solid #1f3f8c;
}

.h1cc1f058-amount{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 28px;
  text-transform: capitalize;
  text-align: center;
  color: #0951ff;
  margin-bottom: 6px;
  display: block;
}

.h1cc1f058-name{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
  text-align: center;
  color: #020d1c;
}





.h1cc1f058-testimonials{
  background: #8dd1ff;
}

.h1cc1f058-testimonials__list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.h1cc1f058-testimonials__item{
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 8px 0 rgba(14, 47, 89, 0.1);
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

.h1cc1f058-review__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}










.h1cc1f058-notice-section{
  background: #fff;
}

.h1cc1f058-notice-card{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1cc1f058-notice-card h2{
  margin: 0px;
}


.h1cc1f058-site-footer{
  background: #0a1d63;
  padding: 50px 0px;
}

.h1cc1f058-footer-info-block{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.h1cc1f058-footer-info-block h3{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 20px;
  text-transform: capitalize;
  color: #fff;
  text-align: start;
}

.h1cc1f058-footer-info-block p{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.h1cc1f058-footer-info{
  display: flex;
  align-items: start;
  gap: 40px;
  flex-wrap: wrap;
}

.h1cc1f058-footer-certifications{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 20px;
  justify-content: space-between;
}

.h1cc1f058-footer-contacts{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.h1cc1f058-contact-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.8);
}

.h1cc1f058-footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  /* text-align: center; */
  justify-content: space-between;
  gap: 20px;
}

.h1cc1f058-copyright-text{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 155%;
  color: #fff;
}

.h1cc1f058-footer-nav-list{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: rgba(255, 255, 255, 0.8);
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.h1cc1f058-contact-section{
  background: url("/h1cc1f058-contact_bg.webp");
  background-size: cover;
  background-position: center;
  padding-top: 120px;
  padding-bottom: 40px;
}

.h1cc1f058-contact-form{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  padding: 20px;
  max-width: 820px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  margin: auto;
  gap: 20px;
}

.h1cc1f058-contact-form__info-list{
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  text-transform: capitalize;
  color: rgba(2, 13, 28, 0.8);
  flex-wrap: wrap;
}

.h1cc1f058-contact-form__info-item{
  display: flex;
  align-items: center;
  gap: 10px;
}

.h1cc1f058-contact-form__fields{
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: #020d1c;
}

.h1cc1f058-contact-form__field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h1cc1f058-contact-form__input{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: rgba(2, 13, 28, 0.5);
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(6, 23, 46, 0.3);
  border-radius: 8px;
}

.h1cc1f058-contact-form__textarea{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: rgba(2, 13, 28, 0.5);
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(6, 23, 46, 0.3);
  border-radius: 8px;
  height: 100px;
}

.h1cc1f058-contact-form__submit{
  border: 0px;
}

.h1cc1f058-policy_section{
  background: #fff;
}

.h1cc1f058-policy_section .h1cc1f058-container{
  gap: 20px;
}

.h1cc1f058-polcy_part{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h1cc1f058-polcy_part ul{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  color: rgba(2, 13, 28, 0.8);
  list-style: disc;
  padding-left: 20px;
}

.h1cc1f058-polcy_part h2{
  text-align: start;
  overflow-wrap: anywhere;
}

.h1cc1f058-polcy_part h3{
  text-align: start;
}

@media screen and (max-width: 1073px) {
  .h1cc1f058-header_wrapper{
    flex-direction: column;
    gap: 0px;
  }

  .h1cc1f058-age-notice{
    gap: 4px;
  }

  .h1cc1f058-age-text{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    text-align: right;
    color: #fff;
  }

  .h1cc1f058-age-badge{
    font-size: 12px;
  }

  .h1cc1f058-header_container{
    justify-content: start;
  }

  .h1cc1f058-nav-list{
    display: none;
  }

  .h1cc1f058-hamburger{
    display: flex;
  }
}

@media screen and (max-width: 991px) {
  .h1cc1f058-hero_description{
    font-size: 17px;
  }

  .h1cc1f058-games_list{
    grid-template-columns: 1fr 1fr 1fr;
  }

  .h1cc1f058-about-section__container{
    flex-direction: column;
  }
}

@media screen and (max-width: 700px){
  .h1cc1f058-games_list{
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .h1cc1f058-site-header{
    padding: 10px 0px;
  }

  .h1cc1f058-logo-image{
    height: 20px;
  }

  .h1cc1f058-hero_section{
    background: url("/h1cc1f058-hero_bg-mobile.webp");
    background-size: cover;
    background-position: center;
    padding-top: 100px;
    padding-bottom: 40px;
  }

  .h1cc1f058-hero_description{
    font-size: 16px;
  }

  .h1cc1f058-hero_CTA{
    max-width: none;
  }

  .h1cc1f058-benefits-list{
    flex-direction: column;
  }

  .h1cc1f058-games_section h2 {
    margin-bottom: 20px;
  }

  .h1cc1f058-games_section .h1cc1f058-notice-card{
    margin-bottom: 20px;
  }

  .h1cc1f058-games_list{
    grid-template-columns: 1fr;
  }

  .h1cc1f058-game-card{
    max-width: none;
    width: 100%;
  }

  .h1cc1f058-amount{
    font-size: 20px;
  }

  .h1cc1f058-testimonials__list{
    grid-template-columns: 1fr;
  }

  .h1cc1f058-footer-info-block p{
    font-size: 14px;
  }
  
  .h1cc1f058-copyright-text{
    text-align: center;
  }

  .h1cc1f058-footer-certifications{
    justify-content: center;
  }

  .h1cc1f058-footer-bottom{
    justify-content: center;
  }

  .h1cc1f058-contact-section{
    background: url("/h1cc1f058-contact_bg-mobile.webp");
    background-size: cover;
    background-position: center;
    padding-top: 80px;
    padding-bottom: 20px;
  }

  .h1cc1f058-contact-form__info-list{
    justify-content: start;
  }
}


/* ===== MOBILE MENU LAYER ===== */
@media screen and (max-width: 1073px) {

  /* turn nav container into overlay panel */
  .h1cc1f058-header_container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(360px, 90%);
    background: rgba(0, 96, 228, 0.97);
    backdrop-filter: blur(6px);
    box-shadow: -10px 0 25px rgba(0,0,0,.15);

    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.4,.0,.2,1);

    padding: 120px 30px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    z-index: 999;
  }

  /* visible state */
  .h1cc1f058-menu-open .h1cc1f058-header_container {
    transform: translateX(0);
  }

  /* show nav vertically */
  .h1cc1f058-nav-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 20px;
  }

  .h1cc1f058-nav-link {
    color: white;
  }

  .h1cc1f058-nav-link.h1cc1f058-active{
    font-weight: 700;
  }

  .h1cc1f058-age-notice {
    margin-top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* background blocker */
  .h1cc1f058-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 998;
  }

  .h1cc1f058-menu-open .h1cc1f058-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* burger animation */
  .h1cc1f058-hamburger span {
    transition: transform .3s ease, opacity .3s ease;
  }

  .h1cc1f058-menu-open .h1cc1f058-hamburger span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }

  .h1cc1f058-menu-open .h1cc1f058-hamburger span:nth-child(2) {
    opacity: 0;
  }

  .h1cc1f058-menu-open .h1cc1f058-hamburger span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  /* prevent scroll when open */
  body.h1cc1f058-menu-open {
    overflow: hidden;
  }
}

.h1cc1f058-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

.message{
  display: none;
}

.active .message{
  display: block;
}