:root{
  --bg: #030406; 
  --surface: #0a1122cc; 
  --surface-2: #0d172ecc; 
  --text: #fdfbf7; 
  --muted: #9ba4b5;
  --line: rgba(212, 175, 55, 0.15); 
  --brand: #d4af37; 
  --brand2: #f1cf65; 
  --radius: 16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.container{width:min(92%,1100px);margin:auto}
.section{padding:5.5rem 0}

/* Background FX - Canvas Setup */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
}
#networkCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Header */
.header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(8px);
  background:#030406bd;
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  min-height:74px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-text{
  display:inline-flex;
  align-items:center;
  gap:.54rem;
}

/* --- تنسيقات صورة الشعار الجديدة --- */
.logo-image {
  height: 38px; /* نفس ارتفاع الشعار القديم للحفاظ على التناسق */
  width: auto;  /* الحفاظ على أبعاد الصورة الأصلية */
  display: block;
}
/* تم إزالة تنسيقات .logo-mark القديمة بالكامل */

.logo-name{
  font-size:1.19rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:.1px;
  display: flex;
  align-items: center;
  gap:.4rem;
}
.logo-name span{ color:var(--brand); font-weight:700; margin-left:5px }

.nav{display:flex;gap:1.3rem}
.nav a{color:#aab5c9;font-weight:600;transition:.25s}
.nav a:hover{color:var(--brand2)}

.menu-btn{display:none;background:transparent;border:0;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

/* Hero */
.hero{
  min-height:calc(100vh - 74px);
  display:grid;place-items:center;
}
.hero-box{
  text-align:center;
  max-width:860px;
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(1.3rem,3vw,2.6rem);
  box-shadow:0 20px 55px #00000088;
}
.badge{
  display:inline-block;
  font-size:.80rem;font-weight:700;letter-spacing:.10em;
  color:var(--brand2);
  background:rgba(212, 175, 55, 0.1);
  border:1px solid rgba(212, 175, 55, 0.3);
  padding:.38rem .9rem;border-radius:999px;
  margin-bottom:1rem;
}
.hero h1{
  font-size:clamp(2rem,4.8vw,2.2rem);
  line-height:1.32;
  margin-bottom:.8rem;
}
.hero-text{color:var(--muted);margin-bottom:1.3rem}
.hero-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap}

.btn{
  padding:.8rem 1.2rem;border-radius:12px;
  font-weight:700;border:1px solid transparent;transition:.25s;
}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#030406;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(212, 175, 55, 0.25)}
.btn-outline{
  border-color:var(--line);
  background:#ffffff05;
  color:var(--brand2);
}
.btn-outline:hover{background:rgba(212, 175, 55, 0.08); border-color:var(--brand);}

.section-head{text-align:center;margin-bottom:1.8rem}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.35rem; color:var(--brand2)}
.section-head p{color:var(--muted)}

/* Service groups and grids */
.service-groups{display:flex;flex-direction:column;gap:1.4rem}
.service-group{margin-bottom:.4rem}
.group-title{
  color:var(--brand);
  font-weight:800;
  margin:0 0 .6rem 0;
  font-size:1.02rem;
  display:block;
}
.group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1rem;
}

/* Card */
.card{
  background:linear-gradient(145deg, #0a1122cf, #050914c9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius:var(--radius);
  padding:1.2rem;
  transition:.28s;
}
.card h3{margin-bottom:.45rem;font-size:1.03rem; color:var(--brand2)}
.card:hover{
  transform:translateY(-66px);
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.15);
}
.card p{color:#a9bad8;font-size:.95rem;line-height:1.45}

/* Lists inside cards */
.card-list,
.card-features{
  margin-top:0.6rem;
  padding:0;
  color:#fdfbf7;
}

/* Custom Gold Bullet Lists (بدلاً من الأرقام) */
.card-list.manual{
  list-style:none;
  padding:0;
  margin-top:0.8rem;
}
.card-list.manual li{
  position: relative;
  padding-right: 1.2rem; /* ترك مسافة يميناً لظهور النقطة */
  margin-bottom:0.6rem;
  color:#9ba4b5;
  font-size:0.95rem;
  line-height:1.4;
  direction:rtl;
}
.card-list.manual li::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0.45rem; /* ضبط النقطة لتكون بجوار منتصف السطر الأول */
  width: 7px; /* عرض النقطة */
  height: 7px; /* طول النقطة */
  background: linear-gradient(135deg, var(--brand2), var(--brand)); /* لون ذهبي متدرج */
  border-radius: 50%; /* لجعلها دائرية */
  box-shadow: 0 0 6px rgba(241, 207, 101, 0.5); /* توهج ذهبي خفيف */
}

/* Card actions / order button */
.card-actions{margin-top:0.9rem; display:flex; gap:0.6rem; justify-content:flex-start}
.order-btn{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#030406;
  border:0;
  padding:0.55rem 0.9rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s, box-shadow .18s;
}
.order-btn:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(212, 175, 55, 0.2)}

/* Why grid */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:1rem;
}
.why-item{
  background:linear-gradient(145deg, #0a1122cf, #050914c9); 
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.3); 
  border-radius:var(--radius);
  padding:1.1rem;
  transition:.28s;
}
.why-item:hover {
  border-color: rgba(212, 175, 55, 0.8);
}
.why-item h4 { color: var(--brand2); margin-bottom: 0.5rem; }
.why-item p{color:#9ba4b5}

/* Contact */
.contact-form{
  max-width:700px;
  margin:auto;
  background:#0a1122c9;
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.2rem;
}
.input-group{margin-bottom:.9rem}
.input-group label{display:block;font-weight:600;margin-bottom:.35rem; color:var(--brand2)}
.input-group input,
.input-group textarea{
  width:100%;
  background:#030406;
  border:1px solid rgba(212, 175, 55, 0.2);
  color:var(--text);
  border-radius:10px;
  padding:.75rem .9rem;
  outline:none;
}
.input-group input:focus,
.input-group textarea:focus{border-color:var(--brand)}
.error{color:#fda4af;font-size:.82rem;display:block;margin-top:.3rem;min-height:18px}
.success-msg{color:var(--brand2);margin-top:.8rem;font-weight:600}

/* Footer */
.footer{
  margin-top:2rem;
  border-top:1px solid var(--line);
  background:#030406d9;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  padding:2rem 0 1.4rem;
}
.footer h3,.footer h4{margin-bottom:.4rem; color:var(--brand)}
.footer p,.footer a{color:#9ba4b5;font-size:.94rem}
.footer ul{list-style:none}
.footer li{margin-bottom:.25rem}
.footer a:hover{color:var(--brand2)}
.copy{
  text-align:center;
  border-top:1px solid var(--line);
  color:#737e93;
  font-size:.88rem;
  padding:1rem;
}
.reveal{opacity:0;transform:translateY(25px);transition:.7s}
.reveal.show{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  .why-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .menu-btn{display:block}
  .nav{
    position:absolute;top:74px;left:0;width:100%;
    max-height:0;overflow:hidden;
    flex-direction:column;gap:.8rem;
    background:#0a1122f5;border-bottom:1px solid var(--line);
    padding:0 4%;transition:max-height .28s ease,padding .28s ease;
  }
  .nav.open{max-height:220px;padding:1rem 4%}
  .group-grid, .why-grid, .footer-grid{grid-template-columns:1fr}
}