
*{box-sizing:border-box}html{background:#07060a}body{margin:0;font-family:Arial,"Tahoma",sans-serif;color:#f7f3fb;background:
radial-gradient(circle at 50% 0%,#30134b 0,rgba(48,19,75,.35) 24%,transparent 50%),#07060a}
.page{width:min(100% - 28px,560px);margin:auto;padding:28px 0 50px}
.card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(24,20,31,.96),rgba(13,11,18,.98));
border:1px solid rgba(177,92,255,.28);border-radius:28px;padding:26px;margin-bottom:18px;
box-shadow:0 18px 55px rgba(0,0,0,.35)}
.hero{text-align:center;padding-top:32px}.glow{position:absolute;width:260px;height:260px;border-radius:50%;top:-130px;left:50%;
transform:translateX(-50%);background:#8c2cff;filter:blur(90px);opacity:.25}
.app-icon{position:relative;width:138px;height:138px;object-fit:cover;border-radius:31px;box-shadow:0 18px 40px rgba(108,32,190,.35)}
.eyebrow{letter-spacing:3px;color:#c993ff;font-size:12px;font-weight:700;margin:22px 0 8px}
h1{font-size:31px;line-height:1.25;margin:0 0 12px}.lead{color:#bdb6c7;line-height:1.8;margin:0 auto 24px;max-width:390px}
.download{display:flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;color:white;
background:linear-gradient(135deg,#8f36e9,#6c1fc5);padding:17px 22px;border-radius:18px;box-shadow:0 12px 28px rgba(130,43,220,.28);
transition:.2s}.download:hover{transform:translateY(-2px)}.download strong{display:block;font-size:19px}.download small{display:block;margin-top:4px;color:#eadcff}
.download-icon{font-size:30px;font-weight:800}.trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:17px;color:#9f98aa;font-size:12px}
.section-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}.section-title span{display:grid;place-items:center;width:37px;height:37px;
border-radius:11px;background:#24142f;color:#c27bff;font-weight:bold}.section-title h2{font-size:20px;margin:0}
.steps{display:grid;gap:13px}.step{display:flex;align-items:flex-start;gap:13px;background:#100d15;border:1px solid #28212f;padding:15px;border-radius:17px}
.step b{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#7022bd}.step strong{font-size:15px}
.step p,.help>p{color:#aaa2b4;line-height:1.7;margin:5px 0 0;font-size:14px}
details{background:#100d15;border:1px solid #2b2333;border-radius:15px;margin-top:12px;overflow:hidden}summary{cursor:pointer;padding:16px;font-weight:700}
.details-body{padding:0 16px 17px;color:#aaa2b4;line-height:1.8;font-size:14px}.footer{text-align:center;color:#665f6d;font-size:12px;margin:25px 0 0}
@media(max-width:390px){.page{width:min(100% - 18px,560px)}.card{padding:20px;border-radius:22px}.app-icon{width:120px;height:120px}h1{font-size:27px}}


/* Simplified install flow */
.simple-steps{
  display:grid;
  gap:12px;
  margin-top:18px;
  text-align:right;
}
.simple-step{
  display:flex;
  align-items:flex-start;
  gap:13px;
  background:#100d15;
  border:1px solid #28212f;
  padding:15px;
  border-radius:17px;
}
.simple-step > b{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#7022bd;
  color:#fff;
}
.simple-step strong{
  font-size:15px;
}
.simple-step p{
  color:#aaa2b4;
  line-height:1.7;
  margin:5px 0 0;
  font-size:14px;
}
.help-box{
  margin-top:16px;
  text-align:right;
}
.help-box summary{
  color:#e8d7f8;
}
.hero .lead strong{
  color:#fff;
}

.important-step{
  border-color:rgba(177,92,255,.45);
  background:linear-gradient(180deg,#17101f,#100d15);
}
.step-content{width:100%}
.photo-guide{
  margin-top:11px;
  border:1px solid rgba(177,92,255,.28);
  background:#17101f;
}
.photo-guide summary{
  padding:12px 14px;
  color:#d9b3ff;
  font-size:13px;
}
.guide-placeholder{
  padding:0 14px 14px;
  color:#aaa2b4;
  line-height:1.7;
  font-size:13px;
}
.safety-note{
  color:#c9becf !important;
  font-size:12px !important;
  margin-top:10px !important;
}


/* v4 layout fixes */
.simple-step{
  position:relative;
  align-items:flex-start;
}
.simple-step > b{
  flex:0 0 36px;
  width:36px;
  height:36px;
  min-width:36px;
}
.simple-step .step-content,
.simple-step > div{
  min-width:0;
  flex:1;
}
.simple-step p b{
  display:inline;
  width:auto;
  height:auto;
  min-width:0;
  background:none;
  border-radius:0;
  color:#fff;
  font-weight:700;
  padding:0;
}
.play-path{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:#bdb6c7;
  font-size:13px;
  line-height:1.7;
}
.play-path span{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:9px;
  background:#17111d;
  border:1px solid #2c2434;
  white-space:nowrap;
}
.play-path i{
  font-style:normal;
  color:#8e55bd;
  font-weight:700;
}
.download{
  direction:rtl;
}
.download-icon{
  line-height:1;
}
@media(max-width:390px){
  .simple-step{
    gap:10px;
    padding:13px;
  }
  .play-path{
    gap:5px;
    font-size:12px;
  }
  .play-path span{
    padding:4px 7px;
  }
}

.support-box{
  margin-top:18px;
  padding:18px;
  border:1px solid #2b2333;
  border-radius:18px;
  background:#100d15;
  text-align:center;
}
.support-title{
  margin:0 0 7px;
  font-size:15px;
  font-weight:700;
  color:#f7f3fb;
}
.support-text{
  margin:0 0 14px;
  color:#aaa2b4;
  font-size:13px;
  line-height:1.7;
}
.support-text b{color:#fff}
.whatsapp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  padding:13px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:#25D366;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.wa-icon{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
}
.wa-icon svg{width:23px;height:23px;display:block}

.service-guide{
  margin-top:18px;
  border:1px solid rgba(177,92,255,.34);
  border-radius:18px;
  background:#100d15;
  overflow:hidden;
  text-align:right;
}
.service-guide > summary{
  padding:17px 18px;
  color:#eadcff;
  font-weight:700;
  cursor:pointer;
}
.service-guide-body{
  padding:0 16px 17px;
}
.guide-intro{
  color:#aaa2b4;
  font-size:13px;
  line-height:1.7;
  margin:0 0 13px;
}
.service-shot{
  margin-top:13px;
  padding:12px;
  border:1px solid #2b2333;
  border-radius:16px;
  background:#0b0910;
}
.shot-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.shot-head b{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#7022bd;
  color:white;
}
.shot-head strong{
  font-size:14px;
}
.service-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:11px;
  background:#000;
}
.guide-done{
  margin:14px 2px 0;
  padding:11px 12px;
  border-radius:12px;
  background:#17111d;
  color:#d9b3ff;
  font-size:13px;
  line-height:1.7;
}

/* صور شرح إيقاف حماية Play */
.play-gallery{
  padding:0 12px 13px;
  display:grid;
  gap:12px;
}
.play-shot{
  padding:10px;
  border:1px solid #2b2333;
  border-radius:14px;
  background:#0b0910;
}
.play-shot-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.play-shot-title b{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#7022bd;
  color:#fff;
  font-size:12px;
}
.play-shot-title strong{
  font-size:13px;
  color:#f4eef8;
}
.play-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  background:#000;
}
