/* ===================== Base ===================== */
:root{
  --bg-deep:#070a1f;
  --bg-deep-2:#0e1440;
  --gold:#f6c453;
  --gold-dark:#d89f2a;
  --purple:#8b5cf6;
  --teal:#2dd4bf;
  --text-light:#f5f6fb;
  --text-muted:#b7bcd9;
  --card-bg:#121a44;
  --card-border:rgba(255,255,255,0.08);
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Tajawal',sans-serif;
  background:var(--bg-deep);
  color:var(--text-light);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

img{max-width:100%;display:block;}

button{font-family:inherit;cursor:pointer;border:none;}

/* ===================== Starry background ===================== */
.stars-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 80% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 40%, #fff, transparent),
    radial-gradient(2px 2px at 90% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 15%, #fff, transparent),
    radial-gradient(2px 2px at 70% 80%, #fff, transparent),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 50%, var(--bg-deep) 100%);
  background-repeat:repeat;
  background-size:400px 400px, 500px 500px, 300px 300px, 350px 350px, 450px 450px, 380px 380px, 320px 320px, 420px 420px, 100% 100%;
  opacity:0.6;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{opacity:0.4;}
  100%{opacity:0.75;}
}

/* ===================== Announcement bar ===================== */
.announce-bar{
  background:linear-gradient(90deg, var(--gold-dark), var(--gold));
  color:#1a1300;
  text-align:center;
  font-weight:700;
  font-size:0.9rem;
  padding:8px 10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.announce-bar .dot{opacity:0.6;}

/* ===================== Hero ===================== */
.hero{
  padding:40px 20px 30px;
}
.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  color:var(--teal);
  font-weight:700;
  margin-bottom:10px;
}
.hero h1{
  font-size:2.3rem;
  font-weight:900;
  line-height:1.4;
  background:linear-gradient(90deg, var(--gold), #fff 60%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:16px;
}
.hero-sub{
  color:var(--text-muted);
  font-size:1.05rem;
  margin-bottom:18px;
}
.hero-badges{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.hero-badges li{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--card-border);
  padding:6px 14px;
  border-radius:30px;
  font-size:0.9rem;
  font-weight:500;
}
.price-box{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.price-now{
  font-size:2.2rem;
  font-weight:900;
  color:var(--gold);
}
.price-note{
  color:var(--text-muted);
  font-size:0.9rem;
}
.mini-note{
  margin-top:10px;
  color:var(--text-muted);
  font-size:0.85rem;
}
.bundle-offers{
  list-style:none;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.bundle-offers li{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:10px 16px;
  text-align:center;
  min-width:110px;
}
.bundle-offers li.best{
  background:rgba(246,196,83,0.12);
  border-color:var(--gold);
}
.bundle-offers li span{
  display:block;
  font-size:0.8rem;
  color:var(--text-muted);
  margin-bottom:4px;
}
.bundle-offers li strong{
  display:block;
  font-size:1.05rem;
  color:var(--gold);
}
.hero-media img{
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(139,92,246,0.35), 0 0 0 1px var(--card-border);
}

/* ===================== Buttons ===================== */
.btn-cta{
  background:linear-gradient(90deg, var(--purple), #6d28d9);
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  padding:16px 34px;
  border-radius:50px;
  box-shadow:0 10px 30px rgba(139,92,246,0.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(139,92,246,0.6);
}
.btn-block{width:100%;}
.btn-pulse{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{box-shadow:0 10px 30px rgba(139,92,246,0.45);}
  50%{box-shadow:0 10px 40px rgba(246,196,83,0.55);}
}

/* ===================== Sections ===================== */
.section{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px;
}
.section-title{
  text-align:center;
  font-size:1.8rem;
  font-weight:900;
  margin-bottom:36px;
  color:var(--text-light);
}

/* Features */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.feature-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
  transition:transform .2s ease;
}
.feature-card:hover{transform:translateY(-4px);}
.feature-icon{font-size:2.2rem;margin-bottom:14px;}
.feature-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--gold);}
.feature-card p{color:var(--text-muted);font-size:0.92rem;}

/* Steps */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:36px;
}
.step-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
}
.step-num{
  width:44px;height:44px;line-height:44px;
  margin:0 auto 14px;
  background:linear-gradient(90deg, var(--gold), var(--gold-dark));
  color:#1a1300;
  border-radius:50%;
  font-weight:900;
  font-size:1.2rem;
}
.step-card h3{margin-bottom:8px;font-size:1.02rem;}
.step-card p{color:var(--text-muted);font-size:0.92rem;}
.center-cta{text-align:center;}

/* Testimonials */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.testimonial-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:24px 20px;
}
.stars{margin-bottom:10px;font-size:0.95rem;}
.testimonial-card p{color:var(--text-muted);margin-bottom:12px;font-size:0.95rem;}
.author{color:var(--teal);font-weight:700;font-size:0.9rem;}

/* FAQ */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  background:none;
  color:var(--text-light);
  text-align:right;
  padding:18px 20px;
  font-size:1rem;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-icon{
  font-size:1.3rem;
  color:var(--gold);
  transition:transform .2s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 20px;
}
.faq-answer p{color:var(--text-muted);padding-bottom:0;font-size:0.92rem;}
.faq-item.open .faq-answer{max-height:200px;padding-bottom:18px;}

/* Final CTA */
.final-cta{
  text-align:center;
  background:linear-gradient(135deg, rgba(139,92,246,0.18), rgba(45,212,191,0.12));
  border-radius:var(--radius);
  margin:0 auto 60px;
  padding:50px 20px;
}
.final-cta h2{font-size:1.7rem;font-weight:900;margin-bottom:12px;}
.final-cta p{color:var(--text-muted);margin-bottom:24px;}

/* Footer */
.site-footer{
  text-align:center;
  padding:30px 20px 100px;
  color:var(--text-muted);
  font-size:0.9rem;
}
.copyright{margin-top:6px;opacity:0.7;}

/* Sticky CTA (mobile) */
.sticky-cta{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--bg-deep-2);
  border-top:1px solid var(--card-border);
  padding:10px 16px;
  z-index:40;
  display:none;
}

/* ===================== Modal ===================== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,4,20,0.75);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:16px;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--bg-deep-2);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  padding:30px 26px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.modal-close{
  position:absolute;
  top:14px;
  left:14px;
  background:rgba(255,255,255,0.08);
  color:var(--text-light);
  width:34px;height:34px;
  border-radius:50%;
  font-size:1.3rem;
  line-height:1;
}
.modal-box h3{font-size:1.3rem;margin-bottom:6px;color:var(--gold);}
.modal-product{color:var(--text-muted);font-size:0.9rem;margin-bottom:4px;}
.modal-price{font-weight:800;font-size:1.2rem;margin-bottom:20px;}
.modal-delivery{color:var(--teal);font-size:0.85rem;font-weight:500;}

#orderForm label{
  display:block;
  font-size:0.88rem;
  color:var(--text-muted);
  margin-bottom:6px;
  margin-top:14px;
}
#orderForm input:not([type=hidden]),
#orderForm select,
#orderForm textarea{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);
  color:var(--text-light);
  padding:12px 14px;
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
}
#orderForm input:focus,
#orderForm select:focus,
#orderForm textarea:focus{
  outline:none;
  border-color:var(--purple);
}
/* المتصفح يعرض قائمة select بخلفية بيضاء افتراضيا، فنجبر لون النص على أن يكون داكنا لضمان وضوحه */
#orderForm select option{
  color:#1b1f3b;
  background:#fff;
}
#orderForm button[type=submit]{margin-top:22px;}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.form-msg{
  margin-top:14px;
  text-align:center;
  font-size:0.9rem;
  min-height:1.4em;
}
.form-msg.success{color:var(--teal);font-weight:700;}
.form-msg.error{color:#ff6b6b;font-weight:700;}

/* ===================== Responsive ===================== */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-badges,.hero-media{justify-content:center;}
  .hero-media{order:-1;max-width:340px;margin:0 auto;}
  .features-grid,.steps-grid,.testimonials-grid{grid-template-columns:1fr 1fr;}
  .sticky-cta{display:block;}
  .site-footer{padding-bottom:110px;}
}
@media (max-width:600px){
  .hero h1{font-size:1.7rem;}
  .features-grid,.steps-grid,.testimonials-grid{grid-template-columns:1fr;}
  .price-now{font-size:1.8rem;}
}