/* ============ Base ============ */
:root{
  --gold:#f5c542;
  --gold-dark:#c9971f;
  --navy:#0b0f1a;
  --navy-2:#121a2b;
  --green:#1e7f4f;
  --blue:#1e5fbf;
  --purple:#5b2a9e;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Cairo', sans-serif;
  background:var(--navy);
  color:#fff;
}

.font-tajawal{font-family:'Cairo', sans-serif;}

/* ============ Hero ============ */
.hero-section{
  position:relative;
  background:linear-gradient(180deg, #05070d 0%, #0b0f1a 60%, #0b0f1a 100%);
  overflow:hidden;
}

.hero-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(245,197,66,0.15), transparent 60%);
  pointer-events:none;
}

.discount-badge{
  background:radial-gradient(circle at 30% 30%, #ff5252, #b30000 70%);
  box-shadow:0 0 25px rgba(255,0,0,0.5);
  transform:rotate(12deg);
}

.btn-cta{
  background:linear-gradient(90deg, var(--gold), var(--gold-dark));
  color:#1a1206;
  font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 30px rgba(245,197,66,0.35);
}
.btn-cta:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 36px rgba(245,197,66,0.5);
}

.pulse-ring{
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(245,197,66,0.5);}
  70%{box-shadow:0 0 0 18px rgba(245,197,66,0);}
  100%{box-shadow:0 0 0 0 rgba(245,197,66,0);}
}

/* ============ Cards ============ */
.book-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.book-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.book-card.green{border-top:4px solid var(--green);}
.book-card.blue{border-top:4px solid var(--blue);}
.book-card.purple{border-top:4px solid var(--purple);}
.book-card.gold{border-top:4px solid var(--gold);}

.icon-circle{
  width:70px;height:70px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:28px;
}
.icon-circle.green{background:rgba(30,127,79,0.2); color:#3ddc84;}
.icon-circle.blue{background:rgba(30,95,191,0.2); color:#5b9dff;}
.icon-circle.purple{background:rgba(91,42,158,0.2); color:#b98cff;}
.icon-circle.gold{background:rgba(245,197,66,0.2); color:var(--gold);}

/* ============ Feature grid ============ */
.feature-item i{
  color:var(--gold);
}

/* ============ Testimonials ============ */
.testimonial-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,0.08);
}
.avatar-circle{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:18px;
  color:#1a1206;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
}
.stars i{color:var(--gold);}

/* ============ FAQ ============ */
.faq-item{
  border:1px solid rgba(255,255,255,0.1);
  background:var(--navy-2);
}
.faq-question{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-item.active .faq-answer{
  max-height:400px;
}
.faq-item.active .faq-toggle-icon{
  transform:rotate(180deg);
}
.faq-toggle-icon{
  transition:transform .3s ease;
}

/* ============ Price box ============ */
.price-box{
  background:linear-gradient(135deg, rgba(245,197,66,0.12), rgba(11,15,26,0.4));
  border:1px solid rgba(245,197,66,0.35);
}
.old-price{
  text-decoration:line-through;
  color:#9aa0ad;
}

/* ============ Sticky mobile CTA ============ */
.sticky-cta{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:50;
  background:rgba(11,15,26,0.95);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(245,197,66,0.3);
}

/* ============ Section titles ============ */
.section-title{
  background:linear-gradient(90deg, var(--gold), #ffe9a8, var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Guarantee badge */
.guarantee-badge{
  border:2px dashed rgba(245,197,66,0.5);
}

@media (max-width:768px){
  .hero-title{font-size:2.1rem !important;}
}