/* ==========================================================================
   Sections — DARK HERO → LIGHT SERVICES → DARK PROCESS → [LIGHT LAB] →
   [LIGHT INSIGHTS] → DARK CTA → DARK FOOTER   (header excluded from rhythm)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (DARK) — HOME-01
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-6);
  min-height: min(calc(100svh - var(--header-h)), 820px);
  padding-block: var(--space-9) var(--space-10);
}
.hero__copy { display: grid; gap: var(--space-5); align-content: center; }
.hero__descriptor { color: var(--surface-text-2); }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero__title-line { display: block; }
.hero__title-line--beyond {
  /* Emphasis by weight contrast only — solid White, full contrast, no colour cue */
  font-weight: 300;
}
/* Arabic: no uppercase; emphasis via IBM Plex Sans Arabic weight (700 / 400) */
:lang(ar) .hero__title { text-transform: none; letter-spacing: 0; line-height: 1.3; }
:lang(ar) .hero__title-line--beyond { font-weight: 400; }

.hero__support {
  font-size: var(--fs-body-lg);
  max-width: 36rem;
  color: var(--color-white);
  text-wrap: pretty;
}

/* Hero concept visual — Proof type: Concept. Secondary to copy. */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  justify-self: end;
}
.hero__visual svg { width: 100%; height: 100%; overflow: visible; }
.hero__visual .proof-label {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-start: 4%;
  background: color-mix(in srgb, var(--color-obsidian) 80%, transparent);
}
.hero__glow {
  position: absolute;
  inset: -20% -25% auto auto;
  width: 70vmax;
  height: 70vmax;
  max-width: 1100px;
  max-height: 1100px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(109, 40, 217, 0.32), rgba(109, 40, 217, 0.08) 55%, transparent 72%);
  pointer-events: none;
}
[dir="rtl"] .hero__glow { inset: -20% auto auto -25%; }

/* Quiet ambient motion — slow breathing of the horizon; off under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .concept-orbit { transform-origin: 300px 300px; animation: orbit-drift 60s linear infinite; }
  .concept-horizon { animation: horizon-breathe 9s ease-in-out infinite alternate; }
}
@keyframes orbit-drift { to { transform: rotate(360deg); } }
@keyframes horizon-breathe { from { opacity: 0.75; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   SERVICES (LIGHT) — HOME-03
   -------------------------------------------------------------------------- */
.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* --------------------------------------------------------------------------
   PROCESS (DARK) — HOME-04
   -------------------------------------------------------------------------- */
.process__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-4);
  position: relative;
}
/* Connector line through markers (logical: runs in reading direction) */
.process-steps::before {
  content: "";
  position: absolute;
  inset-block-start: 22px;
  /* from first marker centre to last marker centre (7 columns, 6 gaps) */
  inset-inline-start: 22px;
  inset-inline-end: calc((100% - 6 * var(--space-4)) / 7 - 22px);
  height: 1px;
  background: linear-gradient(to right, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.6));
}
[dir="rtl"] .process-steps::before {
  background: linear-gradient(to left, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.6));
}

/* --------------------------------------------------------------------------
   LAB (LIGHT) / INSIGHTS (LIGHT) — conditional; omitted when unavailable
   -------------------------------------------------------------------------- */
.lab__head, .insights__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-4); margin-block-end: var(--space-7);
}
.lab__grid, .insights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--grid-gap);
}
/* Two consecutive LIGHT sections: separate with a hairline, not a colour change */
.section--lab + .section--insights { border-block-start: 1px solid var(--border-on-light); }

/* --------------------------------------------------------------------------
   CLOSING CTA (DARK) — HOME-07, LINK-ONLY
   -------------------------------------------------------------------------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 6vw, var(--space-9));
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl);
  background: var(--color-surface-dark);
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -20%;
  width: 70%;
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(109, 40, 217, 0.35), transparent 70%);
}
.cta-panel__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: var(--lh-heading);
  max-width: 22ch;
}
:lang(ar) .cta-panel__title { letter-spacing: 0; line-height: 1.4; }
.cta-panel__body { font-size: var(--fs-body-lg); max-width: 40rem; color: var(--color-white); }

/* --------------------------------------------------------------------------
   Quiet reveal (progressive enhancement; content visible without JS)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  }
  .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
}