:root{
  --red:#E60023;
  --red-dark:#a5001a;
  --red-deep:#6e0012;
  --black:#0b0b0c;
  --charcoal:#17171a;
  --charcoal-2:#232327;
  --white:#ffffff;
  --cream:#faf8f6;
  --gold:#c9a227;
  --gold-light:#eecd6e;
  --gray:#78787f;
  --gray-light:#e7e4e0;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--cream);
  color:var(--black);
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
body.dark{
  background:#0e0e10;
  color:#f2f0ec;
}
h1,h2,h3,h4{font-family:'Cairo',sans-serif;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
.container{max-width:1240px; margin:0 auto; padding:0 22px;}
.section-pad{padding:80px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cairo',sans-serif; font-weight:800; font-size:13px;
  color:var(--red); letter-spacing:.5px; margin-bottom:14px;
}
.eyebrow::before{content:"🔥";}
.section-title{font-size:clamp(26px,4vw,40px); font-weight:900; margin-bottom:10px;}
.section-sub{color:var(--gray); font-size:16px; max-width:560px; margin-bottom:40px;}
body.dark .section-sub{color:#a9a7a2;}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ===== TOP BAR ===== */
.topbar{
  background:linear-gradient(90deg,var(--red-deep),var(--red) 50%,var(--red-deep));
  color:#fff; text-align:center; font-size:13px; font-weight:700;
  padding:9px 14px; letter-spacing:.3px; font-family:'Cairo',sans-serif;
  position:relative; overflow:hidden;
}
.topbar::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  animation:shine 3.5s linear infinite;
}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-light);
  transition:background .4s;
}
body.dark header{background:rgba(14,14,16,.9); border-color:#2a2a2d;}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{
  font-family:'Cairo',sans-serif; font-weight:900; font-size:24px; display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--red);}
.logo small{
  display:block; font-family:'Tajawal',sans-serif; font-weight:500; font-size:11px; color:var(--gray); margin-top:-2px;
}
.nav-actions{display:flex; align-items:center; gap:10px;}
.btn{
  font-family:'Cairo',sans-serif; font-weight:800; font-size:14px;
  padding:11px 20px; border-radius:999px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(230,0,35,.35);}
.btn-primary:hover{box-shadow:0 12px 26px rgba(230,0,35,.45);}
.btn-outline{background:transparent; color:var(--black); border:1.5px solid var(--gray-light);}
body.dark .btn-outline{color:#f2f0ec; border-color:#3a3a3d;}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#241a02;}
.btn-dark{background:var(--black); color:#fff;}
body.dark .btn-dark{background:#fff; color:#111;}
.btn-sm{padding:8px 16px; font-size:12.5px;}
.icon-toggle{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gray-light); font-size:16px;
}
body.dark .icon-toggle{background:#2a2a2d;}
.hide-mobile{display:inline-flex;}
@media(max-width:760px){.hide-mobile{display:none;}}

/* ===== HERO ===== */
.hero{
  position:relative; padding:70px 0 90px; overflow:hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(230,0,35,.16), transparent 60%),
    radial-gradient(700px 400px at 5% 110%, rgba(201,162,39,.12), transparent 60%),
    var(--black);
  color:#fff;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(230,0,35,.15);
  border:1px solid rgba(230,0,35,.4); color:#ff5c72; padding:8px 16px; border-radius:999px;
  font-family:'Cairo',sans-serif; font-weight:800; font-size:12.5px; margin-bottom:22px;
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:#ff2c46; animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(1.4);}}
.hero h1{
  font-size:clamp(34px,5.2vw,58px); font-weight:900; line-height:1.15; margin-bottom:20px;
}
.hero h1 em{
  font-style:normal; background:linear-gradient(90deg,#ff2c46,var(--gold-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{font-size:18px; color:#c9c8cf; max-width:520px; margin-bottom:32px; line-height:1.8;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px;}
.btn-big{padding:16px 30px; font-size:16px; border-radius:14px;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
.hstat b{display:block; font-family:'Cairo',sans-serif; font-size:26px; font-weight:900; color:var(--gold-light);}
.hstat span{font-size:12.5px; color:#9d9ba3;}

.hero-visual{position:relative;}
.hv-card{
  background:linear-gradient(160deg,var(--charcoal),#0f0f11); border:1px solid #2b2b2f;
  border-radius:22px; padding:26px; box-shadow:0 30px 60px rgba(0,0,0,.5); position:relative; overflow:hidden;
}
.hv-card::before{
  content:"حرق أسعار"; position:absolute; top:20px; left:-46px; background:var(--red); color:#fff;
  font-family:'Cairo',sans-serif; font-weight:900; font-size:12px; padding:6px 60px; transform:rotate(-45deg);
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.hv-img{border-radius:14px; overflow:hidden; margin-bottom:18px; aspect-ratio:4/3; background:#fff;}
.hv-img img{width:100%; height:100%; object-fit:contain; opacity:.96;}
.hv-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px;}
.hv-old{color:#8b8a90; text-decoration:line-through; font-size:15px;}
.hv-new{font-family:'Cairo',sans-serif; font-weight:900; font-size:30px; color:#ff5c72;}
.hv-off{background:var(--gold); color:#241a02; font-family:'Cairo',sans-serif; font-weight:900; font-size:13px; padding:5px 12px; border-radius:8px;}
.hv-timer{display:flex; gap:8px; margin-top:6px;}
.hv-timer div{
  background:#1c1c20; border:1px solid #2f2f34; border-radius:10px; padding:8px 4px; text-align:center; flex:1;
  font-family:'Cairo',sans-serif;
}
.hv-timer b{display:block; font-size:19px; font-weight:900;}
.hv-timer span{font-size:10px; color:#8b8a90;}

/* ===== GLOBAL COUNTDOWN BAR ===== */
.countdown-bar{
  background:linear-gradient(90deg,var(--red-dark),var(--red)); padding:22px 0;
}
.cb-wrap{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; color:#fff; text-align:center;}
.cb-title{font-family:'Cairo',sans-serif; font-weight:900; font-size:17px; display:flex; align-items:center; gap:8px;}
.cb-timer{display:flex; gap:10px;}
.cb-timer .tbox{background:rgba(0,0,0,.22); border-radius:10px; padding:8px 14px; min-width:60px;}
.cb-timer .tbox b{display:block; font-family:'Cairo',sans-serif; font-size:22px; font-weight:900;}
.cb-timer .tbox span{font-size:10px; opacity:.85;}

/* ===== PRODUCT GRID ===== */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}
.card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--gray-light); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative; display:flex; flex-direction:column;
}
body.dark .card{background:var(--charcoal); border-color:#2a2a2d;}
.card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.18);}
.card-img{position:relative; aspect-ratio:1/.85; background:#fff; overflow:hidden;}
body.dark .card-img{background:#f5f4f2;}
.card-img img{width:100%; height:100%; object-fit:contain; padding:16px; box-sizing:border-box; transition:transform .5s var(--ease);}
.card:hover .card-img img{transform:scale(1.05);}
.badge-burn{
  position:absolute; top:12px; right:12px; background:var(--red); color:#fff; font-family:'Cairo',sans-serif;
  font-weight:900; font-size:11px; padding:6px 10px; border-radius:8px; display:flex; align-items:center; gap:4px;
  animation:flicker 2s infinite;
}
@keyframes flicker{0%,100%{box-shadow:0 0 0 rgba(230,0,35,.5);}50%{box-shadow:0 0 14px rgba(230,0,35,.55);}}
.badge-off{
  position:absolute; top:12px; left:12px; background:var(--gold); color:#241a02; font-family:'Cairo',sans-serif;
  font-weight:900; font-size:12px; padding:6px 11px; border-radius:8px;
}
.stock-tag{
  position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,.65); color:#fff; font-size:11px;
  padding:4px 10px; border-radius:20px; font-family:'Cairo',sans-serif; font-weight:700;
}
.card-body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-title{font-family:'Cairo',sans-serif; font-weight:800; font-size:15.5px; line-height:1.4; min-height:44px;}
.price-row{display:flex; align-items:baseline; gap:10px;}
.price-old{color:var(--gray); text-decoration:line-through; font-size:14px;}
.price-new{font-family:'Cairo',sans-serif; font-weight:900; font-size:22px; color:var(--red);}
.price-cur{font-size:12px; color:var(--gray); font-weight:600;}
.mini-timer{
  display:flex; gap:6px; background:var(--cream); border-radius:8px; padding:6px 8px; font-family:'Cairo',sans-serif;
}
body.dark .mini-timer{background:#1c1c1f;}
.mini-timer div{flex:1; text-align:center;}
.mini-timer b{font-size:14px; font-weight:900; display:block;}
.mini-timer span{font-size:9px; color:var(--gray);}
.card-actions{display:flex; gap:8px; margin-top:auto;}
.card-actions .btn{flex:1; justify-content:center; padding:10px; font-size:13px;}
.stock-bar{height:5px; background:var(--gray-light); border-radius:6px; overflow:hidden;}
body.dark .stock-bar{background:#2a2a2d;}
.stock-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold));}

/* ===== ENDING SOON strip ===== */
.strip-section{background:var(--charcoal); color:#fff;}
.strip-section .section-sub{color:#a9a7a2;}
.strip-card{
  background:#1e1e22; border:1px solid #2c2c31; border-radius:var(--radius); padding:16px; display:flex; gap:16px;
  align-items:center; transition:transform .3s var(--ease);
}
.strip-card:hover{transform:translateY(-4px);}
.strip-img{width:88px; height:88px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#fff;}
.strip-img img{width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box;}
.strip-info{flex:1; min-width:0;}
.strip-info h4{font-size:14.5px; margin-bottom:6px; font-weight:800;}
.strip-price{display:flex; gap:8px; align-items:baseline; margin-bottom:8px;}
.strip-price .old{font-size:12px; color:#8b8a90; text-decoration:line-through;}
.strip-price .new{color:#ff5c72; font-weight:900; font-family:'Cairo',sans-serif; font-size:17px;}
.strip-timer{display:flex; gap:6px;}
.strip-timer div{background:#111113; border-radius:6px; padding:4px 7px; text-align:center; min-width:34px;}
.strip-timer b{display:block; font-size:12px; font-family:'Cairo',sans-serif;}
.strip-timer span{font-size:8px; color:#8b8a90;}

/* ===== CLEARANCE ===== */
.clearance{background:linear-gradient(160deg,var(--black),#1a0507);}
.clear-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:980px){.clear-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.clear-grid{grid-template-columns:1fr;}}
.clear-card{
  background:#141416; border:1px dashed rgba(230,0,35,.5); border-radius:var(--radius); padding:16px; color:#fff; text-align:center;
}
.clear-tag{
  display:inline-block; background:var(--red); font-family:'Cairo',sans-serif; font-weight:900; font-size:11px;
  padding:5px 12px; border-radius:20px; margin-bottom:12px;
}
.clear-img{aspect-ratio:1/1; border-radius:10px; overflow:hidden; margin-bottom:12px; background:#fff;}
.clear-img img{width:100%; height:100%; object-fit:contain; padding:10px; box-sizing:border-box;}
.clear-card h4{font-size:14px; margin-bottom:6px;}
.clear-card .new{color:var(--gold-light); font-family:'Cairo',sans-serif; font-weight:900; font-size:19px;}

/* ===== WHY US ===== */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{
  background:#fff; border:1px solid var(--gray-light); border-radius:var(--radius); padding:26px; text-align:center;
  transition:transform .3s var(--ease), border-color .3s;
}
body.dark .why-card{background:var(--charcoal); border-color:#2a2a2d;}
.why-card:hover{transform:translateY(-6px); border-color:var(--red);}
.why-ico{
  width:56px; height:56px; border-radius:16px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--red),var(--red-dark)); font-size:26px;
}
.why-card h4{font-size:16px; margin-bottom:8px;}
.why-card p{font-size:13.5px; color:var(--gray); line-height:1.7;}

/* ===== TESTIMONIALS ===== */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:860px){.test-grid{grid-template-columns:1fr;}}
.test-card{
  background:#fff; border:1px solid var(--gray-light); border-radius:var(--radius); padding:24px;
}
body.dark .test-card{background:var(--charcoal); border-color:#2a2a2d;}
.test-stars{color:var(--gold); margin-bottom:12px; letter-spacing:2px;}
.test-card p{font-size:14.5px; line-height:1.8; color:var(--gray); margin-bottom:18px;}
body.dark .test-card p{color:#c3c1bc;}
.test-user{display:flex; align-items:center; gap:12px;}
.test-user img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.test-user b{display:block; font-size:14px; font-family:'Cairo',sans-serif;}
.test-user span{font-size:11.5px; color:var(--gray);}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--gray-light); padding:18px 0;}
body.dark .faq-item{border-color:#2a2a2d;}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Cairo',sans-serif;
  font-weight:800; font-size:16px;
}
.faq-q .plus{transition:transform .3s; color:var(--red); font-size:20px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding-top:12px; color:var(--gray); font-size:14.5px; line-height:1.8; max-width:700px;}

/* ===== FOOTER ===== */
footer{background:var(--black); color:#c9c8cf; padding:60px 0 20px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-logo{font-family:'Cairo',sans-serif; font-weight:900; font-size:22px; color:#fff; margin-bottom:12px;}
.foot-logo span{color:var(--red);}
footer p{font-size:13.5px; line-height:1.8; color:#9d9ba3; max-width:280px;}
footer h5{font-family:'Cairo',sans-serif; color:#fff; font-size:14.5px; margin-bottom:16px;}
footer ul li{margin-bottom:10px; font-size:13.5px; color:#9d9ba3;}
footer ul li a:hover{color:var(--red);}
.foot-social{display:flex; gap:10px; margin-top:16px;}
.foot-social a{
  width:36px; height:36px; border-radius:50%; background:#1c1c1f; display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.foot-social a:hover{background:var(--red);}
.foot-bottom{
  border-top:1px solid #232327; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#6f6d76;
}
.foot-bottom a{color:#9d9ba3;}

/* ===== FLOATING WHATSAPP ===== */
.float-wa{
  position:fixed; bottom:24px; left:24px; z-index:300; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.5);
  font-size:28px; color:#fff; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; box-sizing:border-box;
  background:rgba(10,10,10,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:500;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s;
  padding:20px;
}
.modal-overlay.active{opacity:1; pointer-events:auto;}
.modal-box{
  background:#fff; border-radius:18px; padding:32px; max-width:440px; width:100%; max-height:90vh; overflow-y:auto;
  box-sizing:border-box; position:relative;
  transform:scale(.92); transition:transform .3s var(--ease); box-shadow:0 30px 70px rgba(0,0,0,.35);
}
body.dark .modal-box{background:var(--charcoal); color:#f2f0ec;}
.modal-overlay.active .modal-box{transform:scale(1);}
.modal-close{position:absolute; top:16px; left:16px; font-size:22px; color:var(--gray); cursor:pointer;}
.modal-box h3{font-size:21px; margin-bottom:6px;}
.modal-box p.sub{color:var(--gray); font-size:13.5px; margin-bottom:22px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block; font-size:13px; font-weight:700; margin-bottom:6px; font-family:'Cairo',sans-serif;}
.form-group input, .form-group select{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--gray-light); font-family:'Tajawal',sans-serif;
  font-size:14px; background:var(--cream); transition:border-color .25s;
}
body.dark .form-group input, body.dark .form-group select{background:#1c1c1f; border-color:#333; color:#f2f0ec;}
.form-group input:focus, .form-group select:focus{outline:none; border-color:var(--red);}
.modal-submit{width:100%; justify-content:center; padding:14px; font-size:15px; margin-top:6px;}
.modal-alt{text-align:center; margin-top:14px; font-size:12.5px; color:var(--gray);}

/* toast */
.toast{
  position:fixed; bottom:26px; right:16px; left:16px; max-width:420px; margin:0 auto; background:var(--black); color:#fff; padding:14px 20px; border-radius:12px;
  font-family:'Cairo',sans-serif; font-weight:700; font-size:13px; z-index:600; transform:translateY(120%); opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease); display:flex; align-items:center; gap:8px; word-break:break-word; line-height:1.6;
}
.toast.show{transform:translateY(0); opacity:1;}

::selection{background:var(--red); color:#fff;}

/* ===== BANNER SLIDER ===== */
.banner-strip{padding:34px 0 10px; background:var(--cream);}
body.dark .banner-strip{background:#0e0e10;}
.banner-slider{
  position:relative; width:100%; aspect-ratio:21/6; min-height:120px; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); background:var(--gray-light);
}
body.dark .banner-slider{background:#1c1c1f;}
.banner-slide{
  position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; visibility:hidden; transition:opacity .6s var(--ease);
  display:block;
}
.banner-slide.active{opacity:1; visibility:visible;}
.banner-slide img{width:100%; height:100%; object-fit:cover;}
.banner-caption{
  position:absolute; bottom:0; right:0; left:0; padding:20px 28px;
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent);
  color:#fff;
}
.banner-caption h3{font-family:'Cairo',sans-serif; font-weight:900; font-size:clamp(16px,2.4vw,26px); margin-bottom:4px;}
.banner-caption p{font-size:13px; opacity:.9;}
.banner-dots{display:flex; justify-content:center; gap:8px; margin-top:14px;}
.banner-dot{width:8px; height:8px; border-radius:50%; background:var(--gray-light); cursor:pointer; transition:.25s;}
body.dark .banner-dot{background:#3a3a3d;}
.banner-dot.active{background:var(--red); width:22px; border-radius:5px;}
@media(max-width:700px){.banner-slider{aspect-ratio:16/9;}}