/* ===================== Base ===================== */
:root{
  --bg:#fdf9f3;
  --red:#c0392b;
  --red-dark:#a1291d;
  --gold:#d99a2b;
  --gold-dark:#b97e1c;
  --text:#232323;
  --text-muted:#6b6b6b;
  --card-bg:#ffffff;
  --card-border:#eee2d3;
  --radius:16px;
}

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

html{scroll-behavior:smooth;}

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

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

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

/* ===================== Decorative background ===================== */
.bg-decor{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(2px 2px at 15% 25%, rgba(192,57,43,0.14), transparent),
    radial-gradient(2px 2px at 85% 15%, rgba(217,154,43,0.16), transparent),
    radial-gradient(1.5px 1.5px at 45% 65%, rgba(192,57,43,0.12), transparent),
    radial-gradient(1.5px 1.5px at 65% 35%, rgba(217,154,43,0.13), transparent),
    radial-gradient(2px 2px at 92% 55%, rgba(192,57,43,0.12), transparent),
    linear-gradient(180deg, #fdf9f3 0%, #fbf3e8 50%, #fdf9f3 100%);
  background-repeat:repeat;
  background-size:400px 400px, 500px 500px, 300px 300px, 350px 350px, 450px 450px, 100% 100%;
  opacity:0.9;
}

/* ===================== Announcement bar ===================== */
.announce-bar{
  background:linear-gradient(90deg, var(--red-dark), var(--red));
  color:#fff;
  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(--gold-dark);
  font-weight:700;
  margin-bottom:10px;
}
.hero h1{
  font-size:2.1rem;
  font-weight:900;
  line-height:1.4;
  color:var(--red-dark);
  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:#fdece9;
  border:1px solid var(--card-border);
  color:var(--red-dark);
  padding:6px 14px;
  border-radius:30px;
  font-size:0.9rem;
  font-weight:700;
}
.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-dark);
}
.price-note{
  color:var(--text-muted);
  font-size:0.9rem;
}
.mini-note{
  margin-top:10px;
  color:var(--text-muted);
  font-size:0.85rem;
}
.hero-media img{
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(192,57,43,0.22), 0 0 0 1px var(--card-border);
}

/* ===================== Buttons ===================== */
.btn-cta{
  display:inline-block;
  background:linear-gradient(90deg, var(--red), var(--red-dark));
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  padding:16px 34px;
  border-radius:50px;
  box-shadow:0 10px 30px rgba(192,57,43,0.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(192,57,43,0.5);
}
.btn-block{width:100%;text-align:center;}
.btn-pulse{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{box-shadow:0 10px 30px rgba(192,57,43,0.4);}
  50%{box-shadow:0 10px 40px rgba(217,154,43,0.4);}
}

/* ===================== 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(--red-dark);
}

/* 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;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
  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(--red-dark);}
.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;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
}
.step-num{
  width:44px;height:44px;line-height:44px;
  margin:0 auto 14px;
  background:linear-gradient(90deg, var(--gold), var(--gold-dark));
  color:#fff;
  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;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
}
.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(--red-dark);font-weight:700;font-size:0.9rem;}

/* Guarantee */
.guarantee-box{
  background:#fdece9;
  border-radius:var(--radius);
  padding:28px 24px;
  text-align:center;
  max-width:1100px;
  margin:0 auto;
}
.guarantee-box .feature-icon{margin-bottom:10px;}
.guarantee-box h3{color:var(--red-dark);margin-bottom:8px;font-size:1.2rem;}
.guarantee-box p{color:var(--text-muted);font-size:0.95rem;}

/* 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;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
}
.faq-question{
  width:100%;
  background:none;
  color:var(--text);
  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-dark);
  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(192,57,43,0.10), rgba(217,154,43,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;color:var(--red-dark);}
.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:#fff;
  border-top:1px solid var(--card-border);
  box-shadow:0 -4px 16px rgba(0,0,0,0.08);
  padding:10px 16px;
  z-index:40;
  display:none;
  align-items:center;
  gap:12px;
}
.sticky-cta .price{font-weight:800;color:var(--gold-dark);font-size:1.05rem;white-space:nowrap;}
.sticky-cta .btn-cta{flex:1;}

/* ===================== Modal ===================== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(35,35,35,0.55);
  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:#fff;
  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.25);
}
.modal-close{
  position:absolute;
  top:14px;
  left:14px;
  background:#f1f1f1;
  color:var(--text);
  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(--red-dark);}
.modal-sub{color:var(--text-muted);font-size:0.9rem;margin-bottom:20px;}

.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}

.form-group{margin-bottom:.9rem;}
.form-group label{display:block;font-size:.88rem;color:var(--text-muted);margin-bottom:6px;}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:#fafafa;
  border:1px solid var(--card-border);
  color:var(--text);
  padding:12px 14px;
  border-radius:10px;
  font-family:inherit;
  font-size:.95rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--red);
  background:#fff;
}
.form-group textarea{resize:vertical;min-height:70px;}

.order-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fdece9;
  border-radius:10px;
  padding:.8rem 1rem;
  margin:1rem 0;
  font-weight:700;
}
.order-total span:last-child{color:var(--red-dark);font-size:1.15rem;}

.form-note{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:.8rem;}
.form-note strong{color:var(--gold-dark);}

.form-msg{margin-top:0;margin-bottom:.8rem;text-align:center;font-size:.9rem;min-height:1.2em;}
.form-msg.success{color:var(--red-dark);font-weight:700;}
.form-msg.error{color:#c0392b;font-weight:700;}

#submitBtn:disabled{opacity:.6;cursor:not-allowed;}

/* ===================== Responsive ===================== */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-badges{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:flex;}
  .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;}
}