.pricing{
  width:100%;
  padding:90px 16px;
  text-align:center;
}

.pricing h1{
  font-size:44px;
  color:var(--text);
  margin-bottom:14px;
}

.pricing p{
  color:var(--sub);
  margin-bottom:70px;
}

/* ================= GRID ================= */
.pricing-grid{
  max-width: 1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:46px;
  perspective:1400px;
}

/* ================= FADE IN ================= */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(50px) scale(.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ================= CARD ================= */
.card{
  background:linear-gradient(180deg,#fff,#fafafa);
  border-radius:30px;
  padding:50px 36px;
  position:relative;
  border:1px solid var(--border);

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  /* xuất hiện */
  opacity:0;
  animation:fadeUp .9s ease forwards;

  /* hover mượt */
  will-change:transform;
  transform:translateY(0) scale(1);
  transition:
    transform .7s cubic-bezier(.12,2.1,.28,1),
    box-shadow .6s ease,
    border-color .6s ease;
}

/* delay */
.card:nth-child(1){animation-delay:.2s}
.card:nth-child(2){animation-delay:.45s}
.card:nth-child(3){animation-delay:.7s}

.card:hover{
  transform:
    translateY(-60px)
    scale(1.16)
    rotateX(7deg);
  border-color:1px solid var(--border);
  box-shadow:
    0 100px 180px rgba(0,0,0,.32),
    0 0 0 10px rgba(99, 189, 241, 0.19);
}

/* ================= ICON ================= */
.icon{
  width:72px;
  height:72px;
  margin:0 auto 22px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  background:linear-gradient(135deg,var(--main),#818cf8);
  color:#fff;
  box-shadow:0 16px 38px rgba(99,102,241,.5);
}

.iwifi-icon::before {
  content: "\2714"; /* ✔ */
  color: #2ecc71;
  font-size: 18px;
  margin-right: 6px;
}

/* ================= TEXT ================= */
.plan-name{
  font-size:24px;
  font-weight:700;
  color:var(--text);
}

.price{
  font-size:48px;
  font-weight:800;
  margin: 15px 0 10px;
  color:#2196F3;
}

.price span{
  font-size:20px;
  font-weight:400;
  color:var(--sub);
}


/*  */
.saas_service{
  margin: 0;
}
/* ================= LIST ================= */
.features{
  margin: 10px 0;
  list-style:none;
  text-align:left;
}

.features li{
  margin:16px 0;
  color:#334155;
  font-size:16px;
}

.features li::before{
  content:"\2714";
  color:#2196F3;
  font-weight:700;
  padding-right: 10px;
}

/* ================= BUTTON ================= */
.btnDK{
  display:inline-block;
  padding:18px 50px;
  border-radius:999px;
  background: #2196f3;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.btnDK:hover{
  transform:scale(1.15);
  box-shadow:0 22px 60px rgba(99, 189, 241, 0.65);
  color: #ffff;
}

/* ================= POPULAR ================= */
.popular{
  border:2px solid #2196F3;
}

.popular .price{
  color: red;
}

.badge_pro{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  background: #fb7185;
  color:#fff;
  padding: 13px 50px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 14px 40px rgba(239,68,68,.5);
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .card:hover{
    transform:translateY(-42px) scale(1.12);
  }
}