:root{
      /* defaults (dark) */
      --bg:#0b1220;--bg-soft:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;
      --brand:#0057B8;--brand-2:#00C08B;--border:rgba(255,255,255,.08);
      --header-h:76px;
        --particle-dot: rgba(76, 231, 15, 0.55);     /* نقاط بيضاء خافتة في الوضع الليلي */
        --particle-line: rgba(77, 235, 3, 0.89);    /* خطوط رفيعة وهادئة */
    }
    /* Light theme variables */
    html[data-theme="light"]{
      --bg:#f5f7fb;--bg-soft:#ffffff;--card:#ffffff;--text:#0f172a;--muted:#475569;--border:rgba(2,6,23,.12);
      --particle-dot: rgba(9, 107, 187, 0.993);
      --particle-line: rgba(20, 106, 235, 0.651);
    }
    @media (prefers-color-scheme: light){
      html:not([data-theme]){ --bg:#f5f7fb;--bg-soft:#ffffff;--card:#ffffff;--text:#0f172a;--muted:#475569;--border:rgba(2,6,23,.12); }
    }

        .fx-canvas {
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;     /* لا يؤثر على التفاعل */
    }

    /* تأكيد أن محتوى القسم فوق الكانفس */
    section .container{
      position: relative;
      z-index: 1;
    }

    /* تأكد أن الأقسام مستعدة لإيواء الكانفس */
    section#about,
    section#services,
    section#portfolio,
    section#contact{
      position:relative;
      overflow:hidden;
    }

    *{box-sizing:border-box}
    body{
      margin:0;font-family:'Cairo',sans-serif;line-height:1.75;color:var(--text);
      background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 100%);
      overflow-x:hidden;
    }

    /* Navbar */
    header{position:fixed;top:0;left:0;right:0;z-index:1000;background:color-mix(in oklab, var(--bg-soft) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
    .nav-inner{width:min(1200px,94%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;direction:ltr}
    .logo{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
    .logo img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 5px rgba(0,87,184,.25));transition:opacity .25s ease}
    .logo .wordmark{font-size:1.3rem;font-weight:800;color:var(--text)}
    .logo .accent{color:var(--brand-2)}
    nav ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0;align-items:center;flex-wrap:wrap;direction:ltr}
    nav a{color:var(--text);text-decoration:none;font-weight:600;position:relative} 
    nav a.active{color:var(--brand-2)}
    nav a.active::after{width:100%}
    nav a::after{content:"";position:absolute;inset:auto 0 -4px auto;height:2px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .25s ease}
    nav a:hover::after{width:100%}

    .nav-actions{display:flex;align-items:center;gap:.5rem}
    .btn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);padding:.45rem .85rem;border-radius:10px;font-weight:700;cursor:pointer}
    .btn:hover{border-color:color-mix(in oklab, var(--brand) 40%, var(--border))}
    .btn i{font-size:1rem}

/* Hero section with background video */
.hero--video {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--header-h);
  overflow: hidden;
}

/* الفيديو بالخلفية */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.55) saturate(1.05); /* يجعل الفيديو هادئ وواضح النص */
  pointer-events: none;
}

/* طبقة التعتيم فوق الفيديو */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
      60% 50% at 50% 10%,
      color-mix(in oklab, var(--brand) 10%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75));
}

/* نفس التأثير للوضع النهاري */
html[data-theme="light"] .hero__overlay {
  background: radial-gradient(
      60% 50% at 50% 10%,
      color-mix(in oklab, var(--brand-2) 10%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75));
}

/* المحتوى فوق الفيديو */
.hero__content {
  position: absolute;        /* بدّل من relative إلى absolute */
  inset: 0;                  /* يملأ المساحة الكاملة */
  z-index: 2;                /* فوق الفيديو والتعتيم */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 1rem;
  text-align: center;
}

/* النص أبيض وواضح دائماً */
.hero__content h1 {
  color: #fff !important;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__content p {
  color: rgba(255,255,255,0.9) !important;
  font-size: clamp(16px, 2.1vw, 20px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  max-width: 720px;
}

/* زر الدعوة إلى الإجراء */
.hero__cta {
  margin-top: 1.4rem;
}

    /* Sections */
    section{padding:80px 0;position:relative}
    .container{width:min(1100px,90%);margin:auto}
    h2{font-size:1.9rem;color:var(--text);margin:0 0 1rem;text-align:center}
    p{color:var(--muted)}

    /* About */
    .about{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:2rem;text-align:center}
    .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}
    .feature{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.2rem;transition:transform .25s, box-shadow .25s}
    .feature:hover{transform:translateY(-5px);box-shadow:0 10px 25px color-mix(in oklab, var(--brand) 15%, transparent)}
    .feature i{font-size:1.6rem;color:var(--brand)}

    /* Services */
    .services{background:var(--bg-soft);border-top:1px solid var(--border);text-align:center}
    .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
    .service{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:transform .25s, box-shadow .25s}
    .service:hover{transform:translateY(-6px);box-shadow:0 10px 25px color-mix(in oklab, var(--brand-2) 18%, transparent)}
    .service i{font-size:1.8rem;color:var(--brand);margin-bottom:.6rem}

    /* Contact */
    .contact{background:var(--bg-soft);border-top:1px solid var(--border);text-align:center}
    form{max-width:600px;margin:auto;display:flex;flex-direction:column;gap:1rem}
    input,textarea{padding:.85rem;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
    button[type="submit"]{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:none;padding:.9rem;color:#001018;border-radius:10px;cursor:pointer;font-weight:800}

    /* Footer */
    footer{background:var(--bg-soft);text-align:center;padding:2rem 0;border-top:1px solid var(--border)}
    footer p{color:var(--muted);font-size:.9rem}

    /* Mobile */
    @media (max-width:900px){
      .menu-toggle{display:inline-flex}
      header{padding-inline:0}
      .nav-inner{width:100%;padding:.65rem 4%}
      nav{position:absolute;top:var(--header-h);left:0;right:0;background:var(--bg-soft);border-bottom:1px solid var(--border);display:none;opacity:0;transform:translateY(-8px);transition:.25s ease}
      nav.open{display:block;opacity:1;transform:translateY(0);animation:menuSlide .28s ease}
@keyframes menuSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
      nav ul{flex-direction:column;gap:.25rem;padding:.75rem 4%}
      nav a{display:block;padding:.8rem;border-radius:10px}
      nav a:hover{background:color-mix(in oklab, var(--brand) 10%, transparent)}
      .nav-actions{gap:.4rem}
    }
  .menu-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);cursor:pointer}
    .menu-toggle .bar{width:18px;height:2px;background:var(--text);display:block;position:relative;transition:.25s}
    .menu-toggle .bar::before,.menu-toggle .bar::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);transition:.25s}
    .menu-toggle .bar::before{top:-6px}
    .menu-toggle .bar::after{top:6px}
    .menu-toggle.active .bar{background:transparent}
    .menu-toggle.active .bar::before{transform:translateY(6px) rotate(45deg)}
    .menu-toggle.active .bar::after{transform:translateY(-6px) rotate(-45deg)}


    /* === خلفيات الدوائر التقنية للأقسام === */

/* إعدادات عامة للصورة */
section#about,
section#services,
section#contact {
  position: relative;
  overflow: hidden;
}

section#about::before,
section#about::after,
section#services::before,
section#services::after,
section#contact::before,
section#contact::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: url("images/hero-poster.png") no-repeat center / contain;
  opacity: 0.12;                 /* شفافية خفيفة */
  pointer-events: none;          /* لا تؤثر على التفاعل */
  z-index: 0;
}

/* توزيع الصور على الأطراف */
section#about::before {
  top: -40px;
  left: -60px;
  transform: rotate(10deg);
}
section#about::after {
  bottom: -40px;
  right: -60px;
  transform: rotate(190deg);
}

section#services::before {
  top: -30px;
  right: -70px;
  transform: rotate(15deg);
}
section#services::after {
  bottom: -40px;
  left: -60px;
  transform: rotate(200deg);
}

section#contact::before {
  top: -40px;
  left: -50px;
  transform: rotate(25deg);
}
section#contact::after {
  bottom: -50px;
  right: -50px;
  transform: rotate(205deg);
}

/* جعل المحتوى فوق الخلفية */
section .container {
  position: relative;
  z-index: 2;
}


/* خلفية رقمية خفيفة لكل الأقسام ما عدا البنر */
section:not(.hero) {
  position: relative;
  isolation: isolate;        /* يضمن طبقة مستقلة للخلفية */
}

section:not(.hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/binary-pattern.png"); /* <-- تأكد من المسار */
  background-repeat: repeat;
  background-size: 360px auto;   /* حجم المربعات */
  opacity: 0.06;                 /* خفيفة */
  pointer-events: none;
}

/* اجعل محتوى القسم فوق الخلفية */
section .container {
  position: relative;
  z-index: 1;
}

/* أخفّ في الوضع الفاتح */
html[data-theme="light"] section:not(.hero)::before {
  opacity: 0.035;
}

/* تقليل الضجيج على الشاشات الصغيرة */
@media (max-width: 640px) {
  section:not(.hero)::before { background-size: 280px auto; opacity: 0.05; }
}

/* ========== Portfolio (أعمالنا) ========== */
.portfolio{ background:var(--bg-soft); border-top:1px solid var(--border); text-align:center; }
.portfolio .lead{ color:var(--muted); margin-top:.25rem; }

.work-filters{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 1.25rem;
}
.chip{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:.45rem .9rem; border-radius:999px; cursor:pointer; font-weight:700;
  transition:border-color .2s, transform .15s;
}
.chip:hover{ transform:translateY(-1px); border-color:color-mix(in oklab, var(--brand) 35%, var(--border)); }
.chip.is-active{ border-color:var(--brand-2); box-shadow:0 0 0 2px color-mix(in oklab, var(--brand-2) 22%, transparent); }

.work-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.1rem; margin-top:.75rem;
}
.work-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transform:translateZ(0); /* لتحسين السموث */
}
.work-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.work-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform .35s ease; }
.work-card:hover .work-media img{ transform:scale(1.06); }
.work-zoom{
  position:absolute; inset:auto 10px 10px auto; z-index:2;
  border:0; padding:.45rem .8rem; border-radius:10px; font-weight:800; cursor:pointer;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#001018;
  opacity:0; transform:translateY(6px); transition:.25s;
}
.work-card:hover .work-zoom{ opacity:1; transform:translateY(0); }

.work-info{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem .9rem; }
.work-info h3{ font-size:1.05rem; margin:0; color:var(--text); text-align:start; }
.tag{ font-size:.8rem; color:var(--brand-2); background:color-mix(in oklab, var(--brand-2) 12%, transparent); padding:.25rem .5rem; border-radius:8px; }

/* لايت بوكس بسيط */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center;
  z-index:2000; padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(100%,1100px); max-height:85vh; border-radius:12px; }
.lightbox .close{
  position:absolute; top:18px; inset-inline-end:18px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:.4rem .65rem; cursor:pointer; font-weight:800;
}

/* ========== Process (رحلتنا معك) — نسخة محسّنة ========== */
.process{
  background:var(--bg);
  border-top:1px solid var(--border);
  padding-top:72px; /* تنفّس بسيط */
}

.steps{
  list-style:none; margin:1.5rem auto 0; padding:0; max-width:960px;
  position:relative; counter-reset:step;
}

/* سكة الخط الزمني */
.steps::before{
  content:""; position:absolute; top:0; bottom:0; width:2px;
  inset-inline-end:32px; /* RTL/LTR منطقي */
  background:linear-gradient(
    to bottom,
    color-mix(in oklab, var(--brand) 38%, transparent),
    color-mix(in oklab, var(--brand-2) 38%, transparent)
  );
  opacity:.9;
}

/* عنصر خطوة */
.steps li{
  position:relative; padding:10px 0 18px; /* عمودي */
  padding-inline-end:96px; /* مساحة للأيقونة والسكة (RTL/LTR) */
  display:block;
}

/* الأيقونة الدائرية قرب السكة */
.steps .step-icon{
  position:absolute; inset-inline-end:4px; top:8px;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:20px;
  background:
    radial-gradient(120% 120% at 30% 30%, color-mix(in oklab, var(--brand) 25%, transparent), transparent 70%),
    color-mix(in oklab, var(--brand-2) 16%, transparent);
  border:1px solid var(--border);
  box-shadow:0 6px 22px color-mix(in oklab, var(--brand) 20%, transparent);
  z-index:2;
}

/* نقطة صغيرة على السكة (لمسة جمالية) */
.steps .rail-dot{
  position:absolute; inset-inline-end:30px; top:34px;
  width:10px; height:10px; border-radius:50%;
  background:var(--brand-2);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-2) 25%, transparent);
  z-index:1;
}

/* بطاقة الخطوة */
.step-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 26px color-mix(in oklab, var(--brand) 12%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.steps li:hover .step-card{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--brand) 30%, var(--border));
  box-shadow:0 14px 30px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* العناوين والنص */
.step-card h4{
  margin:.1rem 0 .2rem; font-size:1.1rem; font-weight:800; color:var(--text);
}
.step-card p{ margin:0; color:var(--muted); }

/* استجابة للشاشات الصغيرة */
@media (max-width:640px){
  .steps::before{ inset-inline-end:28px; }
  .steps li{ padding-inline-end:84px; }
  .steps .step-icon{ width:48px; height:48px; font-size:18px; top:10px; }
  .steps .rail-dot{ inset-inline-end:27px; top:32px; }
  .step-card{ padding:12px 14px; }
}


/* ===== موجة الفاصل (من الرد السابق) ===== */
.divider{
  position:relative; height:90px; line-height:0; color:var(--bg-soft);
  margin-top:-60px; z-index:1; pointer-events:none;
}
.divider--to-soft{ color:var(--bg-soft); }
.divider--to-bg{ color:var(--bg); }
.divider svg{ position:absolute; inset:0; width:100%; height:100%; display:block; preserveAspectRatio:none; }