.pricing-wrapper{max-width:1300px;margin:0 auto;}

/* MAIN 6 CARDS IN ONE ROW */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(220px,1fr));
  gap:22px;
  overflow-x:auto;
  padding-bottom:12px;
}

.card{
  background:#fff;
  border-radius:14px;
  padding:24px 20px 26px;
  text-align:center;
  box-shadow:0 12px 25px rgba(0,0,0,.12);
  transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-8px) rotateX(4deg) rotateY(-4deg);
  box-shadow:0 25px 45px rgba(0,0,0,.25);
}
.card.featured{
  background:linear-gradient(135deg,#8a82ff,#6e63ff);
  color:#fff;
}

.title{font-size:17px;font-weight:800}
.price{font-size:44px;font-weight:900;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.currency{font-size:38px}
.old{text-decoration:line-through;opacity:.6}
.new{font-weight:900}
.per{margin:6px 0 14px;font-weight:700}

.list{list-style:none;padding:0;margin:16px 0 20px;font-size:13px}
.list li{margin:8px 0}

.btn{
  display:inline-block;
  padding:12px 30px;
  background:#ff4f7d;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:800;
  border:none;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.card.featured .btn{background:#ffd1dc;color:#ff2f6a}

.section-title{margin:40px 0 16px;font-size:22px;font-weight:900}

/* ADDON TILES */
.addon-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.tile{
  background:#fff;
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
  transition:.25s ease;
  text-align:left;
}
.tile:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 30px rgba(0,0,0,.14);
}
.addon-icon{font-size:30px;margin-bottom:6px}
.tile-title{font-size:14px;font-weight:800}
.tile-price{font-size:18px;font-weight:900}
.tile-price span{font-size:12px;opacity:.6;margin-left:6px}

/* RESPONSIVE */
@media(max-width:1024px){ .addon-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .addon-grid{grid-template-columns:repeat(2,1fr)} }

/* ================= MODAL ================= */
.modal{display:none}
.modal.open{display:block}
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index:9998;
}
.modal-card{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, calc(100% - 24px));
  background:#fff;
  border-radius:16px;
  padding:18px 18px 16px;
  z-index:9999;
  box-shadow:0 35px 70px rgba(0,0,0,.35);
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.modal-badge{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  color:#ff2f6a;
  background:#ffe1ea;
  padding:4px 10px;
  border-radius:999px;
}
.modal-title{
  margin:6px 0 0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  border:0;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  padding:6px 8px;
}

.modal-form{margin-top:10px}
.form-row{margin:10px 0}
.form-row label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
}
.form-row input,.form-row textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.form-row input:focus,.form-row textarea:focus{
  border-color:#8a82ff;
  box-shadow:0 0 0 4px rgba(138,130,255,.18);
}

.form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.btn.btn-outline{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.18);
}
.form-note{
  margin:10px 0 0;
  font-size:13px;
  font-weight:700;
  color:#334155;
  min-height:18px;
}