.tariffs-page{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

.tariff-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:34px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:.25s;
}

.tariff-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
}

.tariff-header{
  margin-bottom:28px;
}

.tariff-header h3{
  margin:8px 0;
  font-size:48px;
}

.tariff-header span{
  color:var(--muted);
}

.tariff-features{
  display:grid;
  gap:12px;
  margin-bottom:30px;
}

.tariff-features p{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
}

.premium{
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 50px rgba(255,255,255,.04);
}

.popular-badge{
  position:absolute;
  right:28px;
  top:28px;
  padding:8px 14px;
  border-radius:999px;
  background:white;
  color:black;
  font-size:13px;
  font-weight:700;
}

@media(max-width:1100px){
  .tariffs-page{
    grid-template-columns:1fr;
  }
}

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

@media (max-width:900px){

    .tariffs-page{

        display:grid;
        grid-template-columns:1fr;

        gap:18px;
    }

    .tariff-card{

        padding:24px;

        border-radius:28px;

        transition:.25s;
    }

    .tariff-card:active{

        transform:scale(.985);
    }

    .tariff-header{

        margin-bottom:22px;
    }

    .tariff-header h3{

        font-size:42px;
        line-height:1;

        margin:10px 0 12px;
    }

    .tariff-subtitle{

        margin-top:6px;
        font-size:15px;
    }

    .tariff-header span{

        font-size:15px;
    }

    .tariff-features{

        gap:10px;
        margin-bottom:24px;
    }

    .tariff-features p{

        padding:16px 18px;

        border-radius:18px;

        font-size:15px;
    }

    .primary-button{

        height:56px;

        border-radius:18px;

        font-size:16px;
    }

    .popular-badge{

        right:18px;
        top:18px;

        padding:8px 14px;

        font-size:12px;

        border-radius:999px;
    }

    .premium{

        border:1px solid rgba(255,255,255,.18);

        box-shadow:
            0 0 40px rgba(255,255,255,.05);
    }

    .tariff-card:nth-child(1){

        animation-delay:.03s;
    }

    .tariff-card:nth-child(2){

        animation-delay:.08s;
    }

    .tariff-card:nth-child(3){

        animation-delay:.13s;
    }

    .tariff-card:nth-child(4){

        animation-delay:.18s;
    }

}

.tariff-subtitle{
  color:var(--muted);
  margin-top:6px;
  font-size:15px;
}

.tariff-features p{
  display:flex;
  align-items:center;
  gap:10px;
}

.tariff-features span{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#f4f4f4;
  font-size:13px;
  font-weight:900;
}

.choose-tariff{
  margin-top:auto;
}

@media(max-width:900px){
  .tariffs-page{
    gap:18px;
  }

  .tariff-card{
    padding:26px 22px;
    border-radius:28px;
    animation:mobileCardIn .32s cubic-bezier(.2,.9,.25,1) both;
  }

  .tariff-card:nth-child(1){ animation-delay:.03s; }
  .tariff-card:nth-child(2){ animation-delay:.08s; }
  .tariff-card:nth-child(3){ animation-delay:.13s; }
  .tariff-card:nth-child(4){ animation-delay:.18s; }

  .tariff-header h3{
    font-size:46px;
    letter-spacing:-1px;
  }

  .tariff-features p{
    padding:15px 16px;
    border-radius:18px;
  }

  .popular-badge{
    right:18px;
    top:18px;
  }

  .premium{
    border:1px solid rgba(255,255,255,.28);

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.07),
        transparent 45%),
        linear-gradient(
        180deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.04));

    box-shadow:
        0 0 60px rgba(255,255,255,.06),
        inset 0 1px rgba(255,255,255,.05);
}
}

.popular-badge{

    background:#fff;

    color:#000;

    box-shadow:
        0 8px 22px rgba(255,255,255,.18);

    transform:translateZ(0);
}
.premium:hover{

    transform:translateY(-6px);

    box-shadow:
        0 0 70px rgba(255,255,255,.09);
}
.premium .primary-button{

    box-shadow:
        0 12px 28px rgba(255,255,255,.12);
}