@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Tajawal",system-ui,sans-serif;color:#fff;background:radial-gradient(circle at 10% 0%,rgba(255,78,205,.16),transparent 30rem),radial-gradient(circle at 90% 10%,rgba(45,212,255,.14),transparent 28rem),radial-gradient(circle at 50% 100%,rgba(124,58,237,.18),transparent 28rem),#070614;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 72%)}a{text-decoration:none;color:inherit}.announcement{text-align:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(90deg,rgba(255,78,205,.12),rgba(45,212,255,.1));font-weight:800}.header{position:sticky;top:0;z-index:20;background:rgba(7,6,20,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}.nav{max-width:1180px;margin:auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand-logo{width:178px;height:auto;display:block}.nav-links{display:flex;align-items:center;gap:18px;color:#ddd8f7;font-weight:700}.nav-whatsapp{padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#25d366,#16a34a);color:#fff}.hero{max-width:1180px;margin:auto;padding:72px 22px 38px;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}.badge{display:inline-flex;width:max-content;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-weight:900;color:#f6eaff}.badge.center{margin-inline:auto}.hero h1{margin:18px 0 12px;font-size:clamp(40px,7vw,74px);line-height:1.03;letter-spacing:-1.5px}.hero-desc{margin:0;color:#d9d6eb;font-size:22px;line-height:1.7}.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:18px;font-weight:900;border:1px solid rgba(255,255,255,.12);transition:transform .2s ease}.btn:hover,.buy-btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(135deg,#ff4ecd,#7c3aed);border:none;box-shadow:0 14px 34px rgba(255,78,205,.25)}.btn.ghost{background:rgba(255,255,255,.08)}.hero-mini-card{padding:24px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.28)}.mini-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.mini-row:last-of-type{border-bottom:none}.mini-row span{font-size:18px;font-weight:800}.mini-row b{color:#fff;font-size:17px}.mini-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.mini-tags span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:800}.products-section,.steps-section{max-width:1180px;margin:auto;padding:34px 22px 10px}.section-head{text-align:center;margin-bottom:24px}.section-head h2{margin:14px 0 0;font-size:clamp(30px,5vw,52px)}.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{overflow:hidden;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 60px rgba(0,0,0,.25)}.product-card.featured{outline:2px solid rgba(255,209,102,.45)}.product-card img{display:block;width:100%;height:auto;aspect-ratio:1619/971;object-fit:cover}.product-body{padding:20px}.top-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:900}.chip.gold{background:rgba(255,209,102,.14);color:#ffe6a1}.chip.blue{background:rgba(45,212,255,.12);color:#b7f4ff}.chip.purple{background:rgba(167,139,250,.16);color:#e1d5ff}.product-body h3{font-size:28px;margin:10px 0 6px}.product-body p{margin:0 0 18px;color:#d8d4ea}.buy-btn{display:flex;justify-content:center;align-items:center;padding:14px;border-radius:18px;background:linear-gradient(135deg,#fff,#ece6ff);color:#12091f;font-weight:900}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-card{padding:24px;border-radius:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.step-card span{font-size:28px;font-weight:900;color:#ffd166}.step-card h3{margin:12px 0 8px;font-size:22px}.step-card p{margin:0;color:#d9d6eb;line-height:1.6}.notice-box{max-width:1180px;margin:44px auto 78px;padding:28px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:32px;background:radial-gradient(circle at 20% 20%,rgba(255,78,205,.18),transparent 24rem),radial-gradient(circle at 80% 80%,rgba(45,212,255,.14),transparent 24rem),rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.notice-box h3{margin:0 0 10px;font-size:30px}.notice-box p{margin:0;color:#d9d6eb;line-height:1.7;font-size:18px}footer{text-align:center;padding:28px 18px 80px;border-top:1px solid rgba(255,255,255,.08);color:#d8d4ea}footer strong{display:block;font-size:24px;color:#fff;margin-bottom:6px}.float-whatsapp{position:fixed;left:18px;bottom:18px;z-index:30;padding:15px 19px;border-radius:999px;background:linear-gradient(135deg,#25d366,#16a34a);color:#fff;font-weight:900;box-shadow:0 18px 44px rgba(34,197,94,.35)}@media(max-width:980px){.nav-links{display:none}.hero,.products-grid,.steps-grid{grid-template-columns:1fr}.hero{text-align:center}.badge,.hero-buttons{margin-inline:auto;justify-content:center}.notice-box{flex-direction:column;align-items:stretch;text-align:center;margin-inline:16px}.float-whatsapp{left:50%;transform:translateX(-50%)}}@media(max-width:520px){.hero{padding:54px 16px 24px}.products-section,.steps-section{padding:28px 16px 8px}.nav{padding:14px 16px}.brand-logo{width:150px}.hero h1{font-size:40px}.product-body h3{font-size:24px}}


/* Popular packs */
.packs {
  display: grid;
  gap: 10px;
  margin: 16px 0 18px;
}

.pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.pack:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.22);
}

.pack span {
  font-weight: 900;
  color: #ffffff;
}

.pack b {
  direction: ltr;
  white-space: nowrap;
  color: #ffd166;
  font-weight: 900;
  font-size: 15px;
}

.featured .pack b {
  color: #ffd166;
}

.product-card:nth-child(2) .pack b {
  color: #2dd4ff;
}

.product-card:nth-child(3) .pack b {
  color: #c4b5fd;
}

@media(max-width:520px){
  .pack {
    padding: 11px 12px;
  }
  .pack span, .pack b {
    font-size: 14px;
  }
}


/* Brand update: L3abUp */
.brand-logo{
  width: 190px !important;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 34px rgba(124,58,237,.28));
}

@media(max-width:520px){
  .brand-logo{
    width: 156px !important;
  }
}


/* Full brand fix: L3abUp */
.brand-logo{
  width: 178px !important;
}
@media(max-width:520px){
  .brand-logo{width:145px !important;}
}


/* Payment section */
.payment-section{
  max-width:1180px;
  margin:auto;
  padding:34px 22px 8px;
}

.payment-card{
  border-radius:32px;
  padding:26px;
  background:
    radial-gradient(circle at 18% 20%, rgba(37,211,102,.16), transparent 18rem),
    radial-gradient(circle at 85% 85%, rgba(45,212,255,.14), transparent 22rem),
    rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 60px rgba(0,0,0,.20);
}

.payment-main{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.payment-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  font-size:28px;
  flex:0 0 auto;
}

.payment-main h3{
  margin:0 0 8px;
  font-size:30px;
}

.payment-main p{
  margin:0;
  color:#d9d6eb;
  line-height:1.75;
  font-size:18px;
}

.payment-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:18px;
}

.payment-steps div{
  padding:17px;
  border-radius:22px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10);
}

.payment-steps span{
  display:inline-flex;
  margin-bottom:9px;
  font-size:18px;
  color:#25d366;
  font-weight:900;
}

.payment-steps b{
  display:block;
  font-size:17px;
  margin-bottom:7px;
}

.payment-steps p{
  margin:0;
  color:#d9d6eb;
  line-height:1.55;
  font-size:14px;
}

.payment-note{
  margin-top:16px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  color:#fff4ce;
  line-height:1.7;
}

@media(max-width:980px){
  .payment-section{padding:28px 16px 8px}
  .payment-main{align-items:flex-start}
  .payment-steps{grid-template-columns:1fr 1fr}
}

@media(max-width:520px){
  .payment-steps{grid-template-columns:1fr}
  .payment-main{flex-direction:column;text-align:center}
  .payment-icon{margin-inline:auto}
}


/* Checkout modal flow */
.checkout-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.checkout-modal.is-open{
  display:flex;
}

.checkout-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,7,20,.78);
  backdrop-filter:blur(14px);
}

.checkout-box{
  position:relative;
  width:min(640px,100%);
  max-height:92vh;
  overflow:auto;
  border-radius:30px;
  padding:24px;
  color:#fff;
  background:
    radial-gradient(circle at 10% 0%, rgba(37,211,102,.18), transparent 19rem),
    radial-gradient(circle at 95% 10%, rgba(45,212,255,.16), transparent 20rem),
    linear-gradient(180deg, rgba(20,24,45,.98), rgba(10,13,27,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 110px rgba(0,0,0,.42);
}

.checkout-close{
  position:absolute;
  left:18px;
  top:18px;
  width:38px;
  height:38px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  color:#fff;
  font-size:25px;
  line-height:1;
  background:rgba(255,255,255,.10);
}

.checkout-header{
  padding-inline-end:34px;
}

.checkout-kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(37,211,102,.13);
  border:1px solid rgba(37,211,102,.24);
  color:#7dffa9;
  font-weight:900;
  margin-bottom:12px;
}

.checkout-header h3{
  margin:0 0 8px;
  font-size:34px;
}

.checkout-header p{
  margin:0;
  color:#d9d6eb;
  line-height:1.75;
}

.checkout-summary{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin:20px 0 14px;
}

.checkout-summary div,
.bank-lines div{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10);
}

.checkout-summary small,
.bank-lines small{
  display:block;
  color:#a7f3d0;
  font-weight:900;
  margin-bottom:6px;
  font-size:12px;
}

.checkout-summary strong,
.bank-lines b{
  display:block;
  font-size:17px;
  word-break:break-word;
}

.checkout-form{
  margin:12px 0 16px;
}

.checkout-form label{
  color:#fff;
  font-weight:900;
  display:grid;
  gap:8px;
}

.checkout-form input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
  border-radius:16px;
  padding:14px 15px;
  font-family:inherit;
  font-size:16px;
}

.bank-box{
  padding:18px;
  border-radius:24px;
  background:rgba(37,211,102,.08);
  border:1px solid rgba(37,211,102,.20);
}

.bank-title{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}

.bank-title span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  flex:0 0 auto;
}

.bank-title h4{
  margin:0 0 4px;
  font-size:22px;
}

.bank-title p{
  margin:0;
  color:#d9d6eb;
}

.bank-lines{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}

.copy-order-btn{
  width:100%;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:16px;
  padding:13px 14px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
}

.checkout-warning{
  margin:14px 0;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  color:#fff4ce;
  line-height:1.7;
}

.checkout-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-radius:18px;
  padding:15px 18px;
  color:#04120a;
  background:linear-gradient(135deg,#25d366,#7dffa9);
  font-weight:900;
  box-shadow:0 18px 40px rgba(37,211,102,.26);
}

@media(max-width:620px){
  .checkout-box{padding:20px;border-radius:24px}
  .checkout-summary{grid-template-columns:1fr}
  .checkout-header h3{font-size:28px}
}


/* Clean product cards fix */
.product-card.card-pubg,
.product-card.card-ff,
.product-card.card-ml{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:rgba(13,12,28,.96);
  isolation:isolate;
}

.product-card.card-pubg{
  border-color:rgba(255,209,102,.34);
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(255,209,102,.10);
}
.product-card.card-ff{
  border-color:rgba(45,212,255,.28);
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(45,212,255,.10);
}
.product-card.card-ml{
  border-color:rgba(167,139,250,.30);
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(167,139,250,.11);
}

.product-card.card-pubg::after,
.product-card.card-ff::after,
.product-card.card-ml::after{
  content:"";
  position:absolute;
  inset:36% 0 0 0;
  z-index:0;
  pointer-events:none;
}

.product-card.card-pubg::after{
  background:
    radial-gradient(circle at 85% 18%, rgba(255,209,102,.20), transparent 38%),
    linear-gradient(180deg, rgba(255,209,102,.07), rgba(255,209,102,.025) 46%, rgba(255,255,255,.02));
}
.product-card.card-ff::after{
  background:
    radial-gradient(circle at 85% 18%, rgba(45,212,255,.20), transparent 38%),
    linear-gradient(180deg, rgba(45,212,255,.07), rgba(45,212,255,.025) 46%, rgba(255,255,255,.02));
}
.product-card.card-ml::after{
  background:
    radial-gradient(circle at 85% 18%, rgba(167,139,250,.20), transparent 38%),
    linear-gradient(180deg, rgba(167,139,250,.075), rgba(167,139,250,.03) 46%, rgba(255,255,255,.02));
}

.product-card img,
.product-body{
  position:relative;
  z-index:1;
}

.product-body{
  padding:20px 18px 20px;
}

.product-body h3{
  margin:12px 0 14px;
  line-height:1.15;
}

.product-body > p{
  display:none !important;
}

.packs{
  gap:10px;
  margin:0;
}

.pack{
  min-height:52px;
  padding:12px 14px;
  border-radius:17px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.pack:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.06));
}

.pack b{
  min-width:78px;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}

.card-pubg .pack b{
  color:#ffd166;
  background:rgba(255,209,102,.12);
  border:1px solid rgba(255,209,102,.22);
}

.card-ff .pack b{
  color:#2dd4ff;
  background:rgba(45,212,255,.12);
  border:1px solid rgba(45,212,255,.22);
}

.card-ml .pack b{
  color:#c4b5fd;
  background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.24);
}

.pack.recommended{
  border-color:rgba(255,255,255,.25);
}

.card-pubg .pack.recommended{
  background:linear-gradient(180deg, rgba(255,209,102,.12), rgba(255,255,255,.05));
  box-shadow:0 0 0 1px rgba(255,209,102,.14);
}
.card-ff .pack.recommended{
  background:linear-gradient(180deg, rgba(45,212,255,.12), rgba(255,255,255,.05));
  box-shadow:0 0 0 1px rgba(45,212,255,.14);
}
.card-ml .pack.recommended{
  background:linear-gradient(180deg, rgba(167,139,250,.13), rgba(255,255,255,.05));
  box-shadow:0 0 0 1px rgba(167,139,250,.15);
}

.buy-btn{
  display:none !important;
}

@media(max-width:520px){
  .product-body{padding:17px 16px 18px}
  .product-body h3{margin:10px 0 12px}
  .pack{min-height:50px}
  .pack b{min-width:72px}
}


/* Plain color card backgrounds per game */
.product-card.card-pubg,
.product-card.card-ff,
.product-card.card-ml{
  background:none !important;
}

.product-card.card-pubg{
  background:linear-gradient(180deg, rgba(46,33,8,.98), rgba(22,16,6,.98)) !important;
  border-color:rgba(255,209,102,.42) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(255,209,102,.14), inset 0 1px 0 rgba(255,209,102,.06) !important;
}
.product-card.card-ff{
  background:linear-gradient(180deg, rgba(7,31,46,.98), rgba(6,18,28,.98)) !important;
  border-color:rgba(45,212,255,.34) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(45,212,255,.12), inset 0 1px 0 rgba(45,212,255,.06) !important;
}
.product-card.card-ml{
  background:linear-gradient(180deg, rgba(33,18,53,.98), rgba(18,11,31,.98)) !important;
  border-color:rgba(167,139,250,.38) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(167,139,250,.13), inset 0 1px 0 rgba(167,139,250,.06) !important;
}

.product-card.card-pubg::after,
.product-card.card-ff::after,
.product-card.card-ml::after{
  display:none !important;
}

.product-card .product-body{
  background:transparent !important;
}

.card-pubg .pack,
.card-ff .pack,
.card-ml .pack{
  background:rgba(255,255,255,.055) !important;
}

.card-pubg .pack.recommended{
  background:rgba(255,209,102,.11) !important;
  border-color:rgba(255,209,102,.22) !important;
}
.card-ff .pack.recommended{
  background:rgba(45,212,255,.10) !important;
  border-color:rgba(45,212,255,.22) !important;
}
.card-ml .pack.recommended{
  background:rgba(167,139,250,.11) !important;
  border-color:rgba(167,139,250,.23) !important;
}

/* Removed copy summary button */
.copy-order-btn{display:none !important;}

/* Clean repeated text sections */
.notice-box,.payment-note{display:none !important;}