:root{
  --navy-950: #0B1220;
  --navy-900: #111A2E;
  --navy-800: #17233d;
  --amber-500: #E8A93B;
  --amber-600: #C98A1F;
  --cream: #F2EFE9;
  --slate-400: #8B94A7;
  --line: #22304d;
  --radius: 14px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Tajawal', sans-serif;
  background:var(--navy-950);
  color:var(--cream);
  line-height:1.7;
}
h1,h2,h3{font-family:'Almarai', sans-serif; margin:0; line-height:1.3}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
section{padding:64px 0}
.section-title{font-size:clamp(24px,4vw,34px); font-weight:800; margin-bottom:10px}
.section-sub{color:var(--slate-400); font-size:16px; max-width:560px}
.center{text-align:center; margin-inline:auto}

/* stripe divider - the product's own visual language */
.stripe-divider{
  height:8px;
  background:repeating-linear-gradient(-45deg, var(--amber-500) 0 18px, var(--navy-950) 18px 36px);
  opacity:.85;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:10px; font-weight:700; font-size:15px;
  text-decoration:none; border:none; cursor:pointer; transition:transform .15s ease, filter .15s ease;
  font-family:'Tajawal', sans-serif;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--amber-500); color:var(--navy-950)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline{background:transparent; border:1.5px solid var(--slate-400); color:var(--cream)}
.btn-outline:hover{border-color:var(--amber-500); color:var(--amber-500)}
.btn-wa{background:#25D366; color:#04220F}
.btn-block{width:100%}
.btn-lg{padding:18px 28px; font-size:16px}

/* header */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(11,18,32,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; font-size:19px; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--cream)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--amber-500)}
.logo-img{height:36px; width:auto; max-width:160px; object-fit:contain}
.header-cta{display:flex; gap:10px}
@media(max-width:640px){ .header-cta .btn span.txt{display:none} }

/* hero */
.hero{padding:60px 0 40px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:32px} }
.hero h1{font-size:clamp(30px,5.5vw,52px); font-weight:800}
.hero .sub{color:var(--slate-400); font-size:18px; margin-top:16px; max-width:480px}
.offer-pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  background:rgba(232,169,59,.12); border:1px solid rgba(232,169,59,.4);
  color:var(--amber-500); padding:9px 16px; border-radius:30px; font-size:14px; font-weight:700;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.trust-line{margin-top:18px; color:var(--slate-400); font-size:13px}
.hero-media{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/3; background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.hero-media img{width:100%; height:100%; object-fit:cover}

/* trust bar */
.trustbar{background:var(--navy-900); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trustbar .container{display:flex; flex-wrap:wrap; gap:26px; justify-content:center; padding:20px}
.trustbar .item{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--slate-400)}
.trustbar .item b{color:var(--amber-500)}

/* problem / solution */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
@media(max-width:860px){ .two-col{grid-template-columns:1fr} }
.point-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px}
.point-list li{display:flex; gap:12px; align-items:flex-start; color:var(--slate-400); font-size:15px}
.point-list li::before{content:'—'; color:var(--amber-500); font-weight:800}
.solution-list li::before{content:'✓'; color:var(--amber-500); font-weight:800}
.media-box{border-radius:var(--radius); border:1px solid var(--line); aspect-ratio:4/3; overflow:hidden; background:var(--navy-900)}
.media-box img{width:100%; height:100%; object-fit:cover}
.callout{margin-top:20px; font-weight:700; color:var(--amber-500)}

/* pricing */
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px}
@media(max-width:760px){ .pricing-grid{grid-template-columns:1fr} }
.price-card{
  background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; position:relative;
}
.price-card.featured{
  border-color:var(--amber-500);
  box-shadow:0 0 0 1px var(--amber-500), 0 20px 50px -20px rgba(232,169,59,.35);
}
.price-badge{
  position:absolute; top:-13px; right:24px; background:var(--amber-500); color:var(--navy-950);
  font-size:12px; font-weight:800; padding:5px 14px; border-radius:20px;
}
.price-card h3{font-size:20px; font-weight:800}
.price-card .desc{color:var(--slate-400); font-size:14px; margin-top:8px}
.price-row{display:flex; align-items:baseline; gap:10px; margin:22px 0}
.price-old{color:var(--slate-400); text-decoration:line-through; font-size:16px}
.price-now{font-size:38px; font-weight:800; color:var(--amber-500)}
.price-cur{font-size:15px; color:var(--slate-400)}
.price-note{font-size:13px; color:var(--slate-400); margin-bottom:20px}

/* urgency */
.urgency{
  background:linear-gradient(90deg, rgba(232,169,59,.14), rgba(232,169,59,.03));
  border:1px solid rgba(232,169,59,.35); border-radius:var(--radius);
  padding:26px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.urgency .title{font-weight:800; font-size:18px}
.countdown{display:flex; gap:10px}
.countdown .cell{background:var(--navy-950); border:1px solid var(--line); border-radius:10px; padding:10px 14px; text-align:center; min-width:60px}
.countdown .cell b{display:block; font-size:22px; color:var(--amber-500)}
.countdown .cell span{font-size:11px; color:var(--slate-400)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.step .num{font-size:14px; color:var(--amber-500); font-weight:800; margin-bottom:10px}
.step h4{font-size:17px; font-weight:800}

/* form */
.order-wrap{background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:34px; margin-top:36px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:700px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; color:var(--slate-400); font-weight:700}
.field .hint{font-size:12px; color:var(--slate-400)}
.field input, .field select, .field textarea{
  background:var(--navy-950); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; color:var(--cream); font-size:14.5px; font-family:'Tajawal',sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--amber-500); outline-offset:1px}
.form-msg{margin-top:16px; padding:12px 16px; border-radius:10px; font-size:14px; display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.4); color:#8ff0b8}
.form-msg.err{background:rgba(220,60,60,.12); border:1px solid rgba(220,60,60,.4); color:#ff9d9d}
.maps-help{display:flex; align-items:center; gap:8px; margin-top:6px}
.maps-help a{font-size:12px; color:var(--amber-500); text-decoration:underline}
.hp-field{position:absolute; left:-9999px; opacity:0}

/* video grid */
.video-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:32px}
.video-card{
  position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:9/16; background:var(--navy-900); cursor:pointer;
}
.video-card .video-thumb{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.video-card:hover .video-thumb{transform:scale(1.04)}
.video-card iframe{width:100%; height:100%; border:0; position:absolute; inset:0}
.video-play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; color:#fff; background:rgba(0,0,0,.28); transition:opacity .2s ease; pointer-events:none;
}
.video-card.playing .video-play-overlay{opacity:0}

/* promo banner */
.promo-banner-img{width:100%; border-radius:var(--radius); border:1px solid var(--line); object-fit:cover; max-height:220px}
.promo-banner-link{display:block}


/* reviews */
.reviews-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.reviews-score{font-size:44px; font-weight:800; color:var(--amber-500)}
.stars{color:var(--amber-500); font-size:18px}
.reviews-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:28px}
.review-card{background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.review-card .who{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-weight:700}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--amber-500);color:var(--navy-950);display:flex;align-items:center;justify-content:center;font-weight:800}

/* faq */
.faq-item{border-bottom:1px solid var(--line); padding:18px 0}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:16px; gap:12px}
.faq-a{max-height:0; overflow:hidden; color:var(--slate-400); font-size:14.5px; transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:300px; margin-top:12px}
.faq-icon{transition:transform .2s ease; color:var(--amber-500); font-size:20px}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* final cta */
.final-cta{
  background:radial-gradient(circle at 30% 20%, rgba(232,169,59,.18), transparent 60%), var(--navy-900);
  border:1px solid var(--line); border-radius:var(--radius); padding:52px 30px; text-align:center;
}
.final-cta h2{font-size:clamp(24px,4vw,36px)}
.final-cta .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* footer */
footer.site{background:var(--navy-900); border-top:1px solid var(--line); padding:48px 0 100px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px}
@media(max-width:700px){ .footer-grid{grid-template-columns:1fr} }
.footer-grid h4{font-size:14px; color:var(--slate-400); margin-bottom:14px}
.footer-grid a{display:block; color:var(--cream); text-decoration:none; font-size:14px; margin-bottom:10px; opacity:.85}
.footer-grid a:hover{color:var(--amber-500)}
.footer-bottom{border-top:1px solid var(--line); margin-top:32px; padding-top:20px; color:var(--slate-400); font-size:13px; text-align:center}

/* floating whatsapp + sticky mobile bar */
.wa-float{
  position:fixed; bottom:88px; left:20px; z-index:50;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4);
  text-decoration:none; font-size:28px;
}
@media(min-width:761px){ .wa-float{bottom:28px} }

.mobile-bar{
  position:fixed; bottom:0; inset-inline:0; z-index:50; display:none;
  background:var(--navy-900); border-top:1px solid var(--line);
  padding:10px 14px; gap:8px;
}
.mobile-bar .btn{flex:1; padding:13px 8px; font-size:13px}
@media(max-width:760px){ .mobile-bar{display:flex} body{padding-bottom:0} }

/* skip link / accessibility */
.skip-link{position:absolute; right:-9999px; top:0; background:var(--amber-500); color:var(--navy-950); padding:10px 16px; z-index:100}
.skip-link:focus{right:10px; top:10px}
:focus-visible{outline:2px solid var(--amber-500); outline-offset:2px}

.section-alt{background:var(--navy-900)}

/* mobile-first refinements for tighter, faster-feeling small screens */
@media(max-width:480px){
  section{padding:44px 0}
  .container{padding:0 16px}
  .hero{padding:36px 0 24px}
  .price-card{padding:22px}
  .order-wrap{padding:22px}
  .final-cta{padding:36px 20px}
  .btn-lg{padding:15px 20px; font-size:14.5px}
}