:root{
  --bg:#0f0f0f;
  --card:#1a1a1a;
  --primary:#00aaff;
  --text:#ffffff;
  --muted:#a0a0a0;
  --radius:12px;
  --max-width:1100px;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{
  width:90%;
  max-width:var(--max-width);
  margin:auto;
}

/* الشعار */
.logo-bar{
  background:#0f0f0f;
  padding:1rem 0;
  border-bottom:1px solid #222;
}
.nav-inner{
  display:flex;
  align-items:center;
}
.logo-text{
  font-size:1.5rem;
  font-weight:700;
  color:var(--primary);
  letter-spacing:1px;
}

/* الهيدر مع صورة */
.hero{
  position:relative;
  height:60vh;
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-image{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  background-size:cover;
  background-position:center;
  filter:brightness(0.5);
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
}
.hero h1{font-size:2.8rem; margin-bottom:.5rem;}
.hero p{font-size:1.3rem; color:#eee;}
.btn-primary{
  display:inline-block;
  margin-top:1.5rem;
  padding:.9rem 2rem;
  background:var(--primary);
  color:#fff;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  transition:background .3s;
}
.btn-primary:hover{background:#0088cc;}

/* باقى الأقسام */
.domains{padding:80px 0;}
.domains h2{text-align:center; margin-bottom:3rem; font-size:2rem;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .3s;
}
.card:hover{transform:translateY(-6px);}
.card h3{font-size:1.4rem; margin-bottom:1rem; color:var(--primary);}
.card ul{
  list-style:none;
  margin-bottom:1.5rem;
  color:var(--muted);
}
.card ul li{margin-bottom:.4rem; padding-left:1.2rem; position:relative;}
.card ul li::before{
  content:"✓"; position:absolute; left:0; color:var(--primary);
}
.card a{
  align-self:flex-start;
  padding:.7rem 1.4rem;
  background:var(--primary);
  color:#fff;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
}
.contact{
  padding:80px 0;
  background:#111;
}
.contact h2{text-align:center; margin-bottom:1rem;}
.contact p{text-align:center; color:var(--muted); margin-bottom:2rem;}
form{
  max-width:600px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
input,textarea{
  padding:1rem;
  border:none;
  border-radius:var(--radius);
  font-size:1rem;
  resize:vertical;
}
button{
  padding:1rem;
  border:none;
  border-radius:var(--radius);
  background:var(--primary);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .3s;
}
button:hover{background:#0088cc;}
#formMsg{text-align:center; margin-top:1rem; color:#4caf50;}
footer{
  padding:2rem 0;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}
@media(max-width:600px){
  .hero h1{font-size:2rem;}
}