/* ================= ROOT ================= */

:root {

  --primary-color:#C89B3C;
  --primary-hover-color:#A9791C;

  --secondary-color:#D4AF37;
  --secondary-hover-color:#B8862F;

  --gold-light:#F6E3A3;
  --gold-dark:#9C701E;

  --background-color:#FBFAF7;
  --section-color:#FFFFFF;

  --text-color:#1C1C1C;
  --subtext-color:#666666;

  --border-color:rgba(200,155,60,.35);

}



/* ================= RESET ================= */


*,
*::before,
*::after {

  box-sizing:border-box;

  margin:0;

  padding:0;

  font-family:"Montserrat",sans-serif;

}



html,
body {

  height:100%;

  background:

  linear-gradient(
    180deg,
    #FBFAF7,
    #F8F1E3
  );

  color:var(--text-color);

}



/* ================= CONTAINER ================= */


.container {

  max-width:600px;

  margin:0 auto;

  padding:20px 10px;

  text-align:center;

}



/* ================= HEADER ================= */


.header {

  height:70px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#ffffff;

  border-bottom:

  1px solid rgba(200,155,60,.25);

}



.logo {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  font-size:27px;

  font-weight:700;

  font-family:"Montserrat",sans-serif;

  color:#1C1C1C;

}



.logo img {

  width:50px;

  height:50px;

  filter:

  drop-shadow(
  0 5px 15px rgba(158, 203, 223, 0.5)
  );

}



/* ================= MAIN ================= */


main {

  min-height:

  calc(100vh - 240px);

}



/* ================= FOOTER ================= */


/* ================= DISTINCT PREMIUM FOOTER ================= */

/* ================= PREMIUM GRADIENT FOOTER ================= */


.footer {

  height:60px;


  display:flex;

  align-items:center;


  overflow:hidden;


  position:relative;


  background:

  linear-gradient(
    135deg,
    #211B12,
    #4A3820,
    #211B12
  );


  border-top:

  1px solid rgba(200,155,60,.6);


}



/* subtle gold glow */

.footer::before {

  content:"";


  position:absolute;


  top:-40px;

  left:50%;


  transform:translateX(-50%);


  width:300px;

  height:80px;


  background:#C89B3C;


  filter:blur(70px);


  opacity:.18;


}



/* top accent */

.footer::after {

  content:"";


  position:absolute;


  top:0;

  left:0;


  width:100%;


  height:2px;


  background:

  linear-gradient(
    90deg,
    transparent,
    #F6E3A3,
    transparent
  );

}



/* RUNNING TEXT */

.footer p {

  position:relative;

  z-index:2;


  white-space:nowrap;


  padding-left:100%;


  font-size:13px;


  font-weight:700;


  letter-spacing:.8px;


  color:#F6E3A3;


  animation:

  footerScroll 22s linear infinite;

}



@keyframes footerScroll {


  from {

    transform:translateX(0);

  }


  to {

    transform:translateX(-100%);

  }

}



/* GOLD ACCENT LINE */

.footer::before {

  content:"";

  position:absolute;


  top:0;

  left:0;


  width:100%;


  height:2px;


  background:#C89B3C;


  box-shadow:

  0 0 12px rgba(200,155,60,.8);

}



/* RUNNING TEXT */

.footer p {

  white-space:nowrap;


  padding-left:100%;


  font-size:13px;


  font-weight:700;


  letter-spacing:.8px;


  color:#F6E3A3;


  animation:

  footerScroll 20s linear infinite;


}



@keyframes footerScroll {


  from {

    transform:translateX(0);

  }


  to {

    transform:translateX(-100%);

  }

}



/* ================= STEPS ================= */


.step {

  display:none;

}


.step.active {

  display:block!important;

}



/* ================= FIRST SCREEN ================= */


#step-start .banner {

  border-radius:20px;

  filter:

  drop-shadow(
    0 15px 30px rgba(200,155,60,.25)
  );

}



#step-start .main-title {

  margin-top:25px;

  font-size:34px;

  line-height:1.15;

  font-weight:800;

  color:#1C1C1C;

}



#step-start .subtext {

  margin-top:15px;

  font-size:21px;

  line-height:1.35;

  font-weight:600;

  color:#666;

}



/* ================= BANNER ================= */


.banner {

  width:100%;

  max-width:610px;

  margin:0 auto;

  border-radius:14px;

}



/* ================= TITLES ================= */


.main-title {

  font-size:30px;

  margin-top:20px;

  font-weight:700;

}



.subtext {

  font-size:23px;

  color:#666;

  margin-top:20px;

  font-weight:600;

}



/* ================= INPUT ================= */


input {

  width:100%;

  max-width:400px;

  padding:16px;

  margin-top:15px;

  border-radius:14px;

  border:

  1px solid rgba(200,155,60,.45);

  background:white;

  font-size:18px;

  box-shadow:

  0 5px 15px rgba(0,0,0,.04);

}



input:focus {

  outline:none;

  border-color:#C89B3C;

}



/* ================= BUTTON ================= */


.primary-btn {

  background:

  linear-gradient(
    135deg,
    #E8C978,
    #C89B3C
  );

  color:#1C1C1C;

  padding:16px 25px;

  min-height:58px;

  border:none;

  border-radius:15px;

  font-size:20px;

  cursor:pointer;

  text-decoration:none;

  margin:15px auto 0;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  font-weight:800;

  box-shadow:

  0 10px 25px rgba(200,155,60,.3);

  transition:.25s;

}



.primary-btn:hover {

  transform:

  translateY(-2px);

  box-shadow:

  0 15px 35px rgba(200,155,60,.4);

}



.primary-btn img {

  width:30px;

  height:30px;

}



/* ================= BIG COUNTER ================= */


.big-counter {

  font-size:45px;

  white-space:nowrap;

  font-weight:900;

  padding:15px;

  margin:15px auto;

  width:100%;

  color:#B8862F;

  background:#fff;

  border-radius:22px;

  border:

  2px solid rgba(200,155,60,.35);

  box-shadow:

  0 10px 30px rgba(200,155,60,.15);

}



/* ================= QUIZ ================= */


.step#step-quiz {

  background:transparent;

}



.question {

  font-size:25px;

  font-weight:700;

  color:#1C1C1C;

  text-align:center;

  padding:18px;

  border-radius:16px;

  background:white;

  border:

  2px solid rgba(200,155,60,.35);

  box-shadow:

  0 8px 25px rgba(0,0,0,.05);

}



.options {

  display:flex;

  flex-wrap:wrap;

  gap:16px;

  justify-content:center;

  margin:20px auto 0;

  padding:10px;

}



.option-btn {

  flex:1 1 45%;

  min-width:200px;

  background:#fff;

  border:

  2px solid rgba(200,155,60,.35);

  color:#1C1C1C;

  padding:16px 20px;

  font-size:21px;

  font-weight:600;

  border-radius:14px;

  text-align:center;

  cursor:pointer;

  transition:.25s;

}



.option-btn:hover {

  background:#FFF5D8;

  border-color:#C89B3C;

}

/* ================= PROGRESS ================= */


.progress-bar {

  width:100%;

  height:35px;

  background:#EFEFEF;

  border-radius:20px;

  margin:30px auto;

  overflow:hidden;

  position:relative;

}



.progress {

  height:100%;

  width:0;


  background:

  linear-gradient(
    90deg,
    #C89B3C,
    #F5D98B
  );

}



.progress-percent {

  font-size:20px;

  font-weight:700;

  color:#1C1C1C;

  position:absolute;

  top:50%;

  left:50%;

  transform:

  translate(-50%,-50%);

}



/* ================= PREMIUM STATS ================= */


.stats {


  width:100%;


  display:flex;


  align-items:center;


  justify-content:center;


  gap:18px;


  padding:45px 15px 35px;


  background:


  linear-gradient(
    180deg,
    #FBFAF7,
    #F7EEDC
  );


  position:relative;


  overflow:visible;


}



.stats::before {


  content:"";


  position:absolute;


  width:260px;


  height:260px;


  background:#C89B3C;


  filter:blur(100px);


  opacity:.18;


  top:50%;


  left:50%;


  transform:

  translate(-50%,-50%);


}



/* ================= CARD ================= */


.stats .item {


  position:relative;


  width:300px;


  height:230px;


  flex:0 0 300px;



  display:flex;


  flex-direction:column;


  justify-content:center;


  align-items:center;



  text-align:center;



  padding:55px 15px 25px;



  background:


  linear-gradient(
    145deg,
    #FFFFFF,
    #FFF8E7
  );



  border-radius:30px;



  border:


  2px solid rgba(200,155,60,.45);



  box-shadow:


  0 20px 45px rgba(184,134,47,.18),


  inset 0 0 30px rgba(255,220,120,.2);


}



/* ================= GOLD BADGE ================= */


.stats .item::before {


  content:"";


  position:absolute;


  top:-38px;


  left:50%;


  transform:

  translateX(-50%);



  width:90px;


  height:90px;



  border-radius:50%;



  background:


  linear-gradient(
    145deg,
    #F8E6A5,
    #B8862F
  );



  border:


  3px solid #E8C968;



  box-shadow:


  0 12px 30px rgba(184,134,47,.45),


  inset 0 0 15px rgba(255,255,255,.5);



}



/* ================= ICON ASSETS ================= */


.stats .item:first-child::after {


  content:"";


  position:absolute;


  top:-27px;


  left:50%;


  transform:

  translateX(-50%);



  width:72px;


  height:72px;



  background:


  url('./assets/card1.png')


  center / contain no-repeat;



  z-index:3;


}



.stats .item:nth-child(2)::after {


  content:"";


  position:absolute;


  top:-27px;


  left:50%;


  transform:

  translateX(-50%);



  width:72px;


  height:72px;



  background:


  url('./assets/card.png')


  center / contain no-repeat;



  z-index:3;


}



/* ================= ALL STAT TITLES ================= */


.stats .item p {


  width:100%;


  height:42px;


  max-width:220px;



  display:flex;


  justify-content:center;


  align-items:center;



  text-align:center;



  margin:0;



  font-size:14px;


  line-height:1.25;


  font-weight:800;



  color:#666;



  text-transform:uppercase;


}



/* ================= ALL STAT VALUES ================= */


/* ВСЕ ЗНАЧЕНИЯ ОДИНАКОВЫЕ */

.stats .item span {

  width:100%;

  height:55px;

  display:flex;

  justify-content:center;

  align-items:center;

  margin-top:22px;

  overflow:hidden;

  text-align:center;

  font-weight:900;

  line-height:1;


  background:

  linear-gradient(
    120deg,
    #C89B3C 0%,
    #C89B3C 45%,
    #FFF3B0 50%,
    #C89B3C 55%,
    #C89B3C 100%
  );


  background-size:300% auto;

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;


  animation:goldShine 1s ease-in-out infinite;

}

.stats .item:first-child span {
  animation-duration:9s;
  animation-delay:1.5s;
}


.stats .item:nth-child(2) span {
  animation-duration:13s;
  animation-delay:4s;
}

@keyframes goldShine {

  0% {

    background-position:100% center;

  }


  30% {

    background-position:0% center;

  }


  100% {

    background-position:0% center;

  }

}




/* SMALL VALUES */

.stats .item span#remainingRewards,
.stats .item span#userId {


  font-size:20px;


  letter-spacing:-0.5px;


  white-space:nowrap;


}



/* LONG VALUES */

.stats .item span#paidToday,
.stats .item span#userCash {


  font-size:26px;


  letter-spacing:-0.8px;


  white-space:nowrap;


}
/* ================= RESULTS ================= */


.results-container {


  display:flex;


  flex-direction:column;


  align-items:center;


  justify-content:center;



  background:#fff;



  border:


  3px solid rgba(200,155,60,.8);



  border-radius:24px;



  padding:0 10px 20px;



  box-shadow:


  0 15px 40px rgba(200,155,60,.18);



}



.results-container .title {


  width:90%;


  max-width:400px;


  padding:12px 10px;



  background:


  linear-gradient(
    135deg,
    #E8C978,
    #C89B3C
  );



  color:#1C1C1C;



  border-radius:


  0 0 18px 18px;



  font-size:24px;



  font-weight:800;



  text-align:center;



}



.results-container .primary-btn {


  width:100%;


  margin-bottom:20px;


}



.results-container .description {


  font-size:22px;


  line-height:1.3;


  text-transform:uppercase;


  margin:15px 0;


  color:#333;



}



.results-container .description span {


  color:#C89B3C;


  font-weight:900;


}



.results-container .important {


  color:#B8862F;


  font-size:18px;


  line-height:1.4;


  font-weight:700;


  margin-top:10px;


  text-align:center;



}



.results-container .subtext {


  margin-top:10px;


  font-weight:600;


  font-size:18px;


}



/* ================= QUESTION COUNTER ================= */


.question-counter {


  font-size:23px;


  font-weight:800;


  color:#B8862F;


  text-align:center;


  margin-bottom:20px;


  text-transform:uppercase;



}



/* ================= VIDEO ================= */


.video-container {


  width:100%;


  max-width:300px;



  margin:20px auto;



  position:relative;



  border:


  3px solid #C89B3C;



  border-radius:15px;



  overflow:hidden;



  box-shadow:


  0 10px 30px rgba(200,155,60,.25);



}



.video-container video {


  display:block;


  width:100%;


}



.video-container .play-button {


  position:absolute;


  top:50%;


  left:50%;


  transform:


  translate(-50%,-50%);



  width:70px;



  height:70px;



  background:


  url('./assets/play.png')


  no-repeat center center;



  background-size:contain;



  cursor:pointer;


}



/* ================= OFFER ================= */


.step#step-offer .primary-btn {


  font-size:21px;


  min-height:60px;


}



/* ================= MOBILE ================= */


@media(max-width:600px){



  .logo {


    font-size:23px;


  }



  .main-title {


    font-size:27px;


  }



  .subtext {


    font-size:19px;


  }



  .stats {


    gap:10px;


    padding:40px 8px 25px;


  }



  .stats .item {


    width:calc(50vw - 15px);


    flex:0 0 calc(50vw - 15px);


    height:200px;


    padding:45px 8px 20px;


  }



  .stats .item p {


    font-size:12px;


    max-width:130px;


  }



  .stats .item span#remainingRewards
{


    font-size:30px;


  }

  .stats .item span#userId {


    font-size:20px;


  }



  .stats .item span#paidToday,
  .stats .item span#userCash {


    font-size:20px;


  }



  .stats .item::before {


    width:65px;


    height:65px;


    top:-32px;


  }



  .stats .item:first-child::after,
  .stats .item:nth-child(2)::after {


    width:45px;


    height:45px;


    top:-24px;


  }



  .question {


    font-size:21px;


  }



  .option-btn {


    min-width:100%;


    font-size:18px;


  }



  .big-counter {


    font-size:36px;


  }


}

  .results-container .title {


    font-size:20px;


  }


/* ================= HOW TO PARTICIPATE DECOR ================= */

.how-title {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  margin-top:35px;
  margin-bottom:5px;
}


.how-line {
  width:200px;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    #D4AF37
  );
}


.how-line:last-child {
  background:linear-gradient(
    90deg,
    #D4AF37,
    transparent
  );
}


.how-icon {

  width:38px;
  height:38px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border:2px solid rgba(200,155,60,.45);

  box-shadow:
  0 5px 15px rgba(200,155,60,.18);

}


.how-icon img {

  width:70px;
  height:70px;

  object-fit:contain;

}