/* ==========================================================================
   sections.css — تخطيطات خاصة بكل قسم
   ========================================================================== */

/* --- الهيرو --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--brand-ink);
  color: var(--on-dark-body);
  margin-top: calc(-1 * var(--header-h));          /* يمتد خلف الهيدر الشفاف */
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}

/* شبكة ضوئية ناعمة — لا نمط دوائر كهربائية */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(46% 55% at 78% 8%,  rgba(44, 191, 201, .26), transparent 70%),
    radial-gradient(40% 50% at 12% 92%, rgba(44, 191, 201, .13), transparent 72%),
    radial-gradient(70% 60% at 50% 0%,  rgba(29, 71, 87, .55),   transparent 75%);
}

/* حقل الأشرطة المتزاحفة — التوقيع البصري للصفحة */
.hero__bars {
  position: absolute;
  inset-block: -10%;
  inset-inline-end: -6%;
  width: min(60%, 720px);
  z-index: -1;
  opacity: .5;
  transform: skewX(var(--skew));
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(44, 191, 201, .16) 0 3px,
    transparent 3px 34px
  );
  mask-image: linear-gradient(to left, #000 8%, transparent 88%);
  -webkit-mask-image: linear-gradient(to left, #000 8%, transparent 88%);
}

.hero__inner { max-width: 62ch; }
.hero__title { color: var(--on-dark-strong); margin-block: var(--sp-5) var(--sp-5); }
.hero__title em {
  font-style: normal;
  color: var(--brand-aqua);
}
.hero__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  max-width: 54ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}
.hero__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--on-dark-strong);
  font-weight: 600;
}

/* --- من نحن --------------------------------------------------------------- */

.about__layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-8);
  align-items: start;
}
.about__body p + p { margin-top: var(--sp-4); }
.about__body strong { color: var(--text-strong); font-weight: 600; }

.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
.value:first-child { border-top: 0; padding-top: 0; }
.value__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-aqua);
  padding-top: 4px;
}
.value h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.value p  { font-size: var(--fs-sm); }

/* --- أعمالنا — شريط شعارات العملاء -------------------------------------- */

.logo-marquee {
  display: flex;
  align-items: center;
  height: 110px;
  overflow: hidden;
  width: 100%;
  direction: ltr; /* حركة أفقية ثابتة بغض النظر عن اتجاه الصفحة */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  animation: scroll-marquee 28s linear infinite;
}

.logo-marquee__item {
  flex: none;
  height: 52px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  /* هامش بدل gap حتى تكون -50% حلقة سلسة بلا قفزة */
  margin-inline-end: var(--sp-8);
}

@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    height: auto;
    min-height: 110px;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .logo-marquee__track {
    animation: none !important;
    animation-play-state: paused;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: var(--sp-5);
  }
  .logo-marquee__item[aria-hidden="true"] { display: none; }
  .logo-marquee__item { margin-inline-end: var(--sp-6); }
}

@media (max-width: 640px) {
  .logo-marquee__item {
    height: 38px;
    max-width: 130px;
    margin-inline-end: var(--sp-5);
  }
}

/* --- عملية العمل (Stepper) ------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.step::after {
  content: "";
  position: absolute;
  top: -5px;
  inset-inline-start: 0;
  width: 22px;
  height: 12px;
  background: var(--brand-aqua);
  transform: skewX(var(--skew));
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-aqua);
}
.step h3 { font-size: var(--fs-lg); margin-block: var(--sp-2) var(--sp-3); }
.step p  { font-size: var(--fs-sm); }

/* --- تواصل معنا ----------------------------------------------------------- */

.contact__layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--sp-8);
  align-items: start;
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.contact__aside {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.contact__list { display: grid; gap: var(--sp-5); margin-block: var(--sp-5); }
.contact__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); }
.contact__item svg { width: 19px; height: 19px; color: var(--brand-aqua); margin-top: 5px; }
.contact__item .k { font-size: .78rem; color: var(--on-dark-muted); }
.contact__item .v {
  font-family: var(--font-display);
  color: var(--on-dark-strong);
  font-size: var(--fs-sm);
  direction: ltr;
  text-align: right;
}
.contact__item a.v:hover { color: var(--brand-aqua); }

/* --- استجابة ------------------------------------------------------------- */

@media (max-width: 960px) {
  .about__layout,
  .contact__layout { grid-template-columns: 1fr; gap: var(--sp-7); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero__bars { display: none; }
  .hero__actions .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .form__grid { grid-template-columns: 1fr; }
  .form__footer .btn { width: 100%; }
}