:root{
  --bg:#050509;
  --gold:#f5c77a;
  --gold-soft:#ffb84d;
  --text:#f4f4f4;
  --muted:#b8b8c9;
  --red:#ff5a5a;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:Montserrat,Arial,sans-serif;
  background:radial-gradient(circle at top,#0b0b14,#050509 70%);
  color:var(--text);
}

/* HEADER */
.header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:30px 40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  z-index:10;
}

.logo{
  font-family:"Space Grotesk",sans-serif;
  font-size:26px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:1px;
}

.hero{
  width:100%;
  min-height:100vh;
  padding:200px 0 140px;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.8) 0%,
      rgba(0,0,0,.6) 35%,
      rgba(0,0,0,.35) 60%,
      #020617 100%
    ),
    url("../images/header.png") center/cover no-repeat;
}
@media (max-width:768px){

  .hero{
    padding:140px 0 100px;

    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.65) 40%,
        rgba(0,0,0,.4) 65%,
        #020617 100%
      ),
      url("../images/header.png") top center/cover no-repeat;
  }

}


/* CONTAINER */
.container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  text-align:center;
}

/* TYPO */
h1,h2,h3{font-family:"Space Grotesk",sans-serif}

h1{font-size:clamp(42px,5vw,52px)}
h2{font-size:clamp(32px,4vw,38px)}
h3{font-size:22px}

p{
  margin-top:18px;
  color:var(--muted);
  font-size:17px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top:45px;
  padding:20px 54px;
  border-radius:22px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  color:#000;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 0 70px rgba(245,199,122,.55);
}

/* TIMER */
.timer-wrap{
  margin-top:35px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.timer-box{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(245,199,122,.4);
  border-radius:18px;
  padding:16px 22px;
  min-width:95px;
}

.timer-box span{
  display:block;
  font-size:32px;
  font-weight:800;
  color:var(--gold);
}

.timer-box small{
  font-size:12px;
  color:var(--muted);
}

.discount{
  margin-top:25px;
  font-size:18px;
  color:var(--gold);
}

/* SECTIONS */
section{
  padding:120px 0;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
  margin-top:70px;
}

/* CARD */
.card{
  position:relative;
  padding:80px 36px 50px;
  border-radius:36px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.45));
  border:1px solid rgba(245,199,122,.45);
  backdrop-filter:blur(10px);
}

.card::before{
  content:attr(data-step);
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:40px;
  font-weight:800;
  color:rgba(245,199,122,.9);
}

/* PRICE BG */
.price-section{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.75),
      rgba(0,0,0,.9)
    ),
    url("../images/section.png") center/cover no-repeat;
}

/* TARIFF */
.tariff{
  position:relative;
  background:rgba(0,0,0,.65);
  border-radius:48px;
  padding:90px 60px;
  border:1px solid rgba(245,199,122,.8);
  margin-top:50px;
  overflow:hidden;

  box-shadow:
    0 0 60px rgba(245,199,122,.25),
    0 0 120px rgba(245,199,122,.15);
}

.tariff::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(245,199,122,.25) 50%,
    transparent 60%
  );
  transform:rotate(25deg);
  animation:goldShine 6s linear infinite;
}

.tariff h3{
  font-size:26px;
  line-height:1.45;

  background:linear-gradient(
    90deg,
    #f5c77a,
    #ffe6a8,
    #f5c77a
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 25px rgba(245,199,122,.35);
}

/* PRICE */
.old-price{
  font-size:26px;
  color:#999;
  text-decoration:line-through;
}

.new-price{
  font-size:68px;
  font-weight:900;
  color:var(--gold);
  margin:12px 0;
  text-shadow:
    0 0 25px rgba(245,199,122,.45),
    0 0 60px rgba(245,199,122,.25);
}

.sale-badge{
  display:inline-block;
  margin-top:12px;
  padding:8px 18px;
  background:var(--red);
  color:#fff;
  border-radius:14px;
  font-weight:700;
}

/* LIST */
ul{
  list-style:none;
  margin-top:45px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

ul li{
  margin-bottom:14px;
  color:var(--muted);
}

ul li:before{
  content:"✦";
  color:var(--gold);
  margin-right:10px;
}

/* SCROLL BTN */
#scrollToPrice{
  display:inline-block;
  margin-top:45px;
  padding:20px 54px;
  border-radius:22px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  color:#000;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 0 70px rgba(245,199,122,.55);
  cursor:pointer;
  transition:.3s;
  border:none;
}

#scrollToPrice:hover{
  transform:scale(1.05);
  box-shadow:0 0 90px rgba(245,199,122,.65);
}

/* ANIM */
@keyframes goldShine{
  0%{transform:translateX(-60%) rotate(25deg);}
  100%{transform:translateX(60%) rotate(25deg);}
}