/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0b0b;
  --panel:#3d3c3c;
  --text:#ffffff;
  --muted:rgba(255,255,255,.86);
  --orange:#ff9f00;
  --orange2:rgb(237,114,6);
  --line:rgba(255,159,0,.28);
  --shadow:0 3px 12px rgba(255,140,0,.45);
  --r:18px;
}

body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}

/* باش المحتوى مايدخلش تحت النافبار */
.page{padding-top:86px}

/* ===== NAVBAR (Fixed) ===== */
.header{
  position:fixed;top:0;left:0;width:100%;
  background:#000;z-index:9999;
  border-bottom:1px solid var(--orange2);
}
.navbar{
  max-width:1200px;margin:0 auto;
  padding:14px 8%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;text-decoration:none;font-weight:900;font-size:28px}
.electro{color:#fff}
.twenty{color:var(--orange);margin-left:3px}

.menu{display:flex;gap:18px;align-items:center}
.menu a{
  text-decoration:none;
  padding:8px 10px;border-radius:10px;
  transition:.2s;
  color:#fff;opacity:.92;
}
.menu a:hover{color:var(--orange);opacity:1;background:rgba(255,159,0,.08)}
.menu a.active{color:var(--orange);opacity:1;background:rgba(228,142,4,.12)}

/* ===== LAYOUT ===== */
.container{max-width:1200px;margin:0 auto;padding:30px 8%}

/* ===== HERO ===== */
.hero{
  max-width:1200px;margin:0 auto;
  display:flex;gap:30px;align-items:center;justify-content:space-between;
  padding:30px 8%;
}
.hero-text{max-width:560px}
.hero-text h1{font-size:42px;line-height:1.1;margin-bottom:10px}
.hero-text h1 .accent{color:var(--orange)}
.subtitle{opacity:.9;margin-bottom:14px}
.desc{opacity:.85;line-height:1.7;margin-bottom:18px}

.btn{
  display:inline-block;text-decoration:none;
  background:var(--orange);color:#000;font-weight:800;
  padding:12px 16px;border-radius:14px;
  transition:.2s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

.hero-image{
  width:min(520px,90%);
  border-radius:var(--r);
  background:var(--panel);
  border:1px solid var(--orange2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-image img{width:100%;display:block}

/* ===== GRID / CARDS ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:var(--panel);
  border:1px solid rgba(255,159,0,.65);
  box-shadow:var(--shadow);
  border-radius:var(--r);
  padding:16px;
}
.card img{
  width:100%;
  height:220px;
  object-fit:contain;
  object-position:center;
  background:rgba(0,0,0,.20);
  border-radius:14px;
  display:block;
  margin:0 auto 14px;
  padding:10px;
}
.card h3{margin-bottom:8px}
.card p{opacity:.90;line-height:2;font-size:14px}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid rgba(255,255,255,.18);
  padding:18px 8%;
  opacity:.85;
  text-align:center;
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  width:62px;height:62px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  text-decoration:none;
  transform:translateZ(0);
  animation:waPulse 1.6s infinite;
}
.whatsapp-float svg{width:34px;height:34px;fill:#fff}
.whatsapp-float:hover{filter:brightness(1.05)}
@keyframes waPulse{
  0%{box-shadow:0 10px 25px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); transform:translateY(0)}
  70%{box-shadow:0 10px 25px rgba(0,0,0,.45), 0 0 0 18px rgba(37,211,102,0); transform:translateY(-2px)}
  100%{box-shadow:0 10px 25px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,0); transform:translateY(0)}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 950px){
  .hero{flex-direction:column}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-text h1{font-size:34px}
}
@media (max-width: 600px){
  .menu{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .grid{grid-template-columns:1fr}
}