:root {
  --navy-950: #020d18;
  --navy-900: #061526;
  --navy-850: #0a1d30;
  --navy-800: #10283e;
  --navy-700: #183b58;
  --steel-500: #7890a6;
  --steel-300: #aebdca;
  --ivory: #f2ede1;
  --paper: #e7e6df;
  --ink: #0d2133;
  --gold: #c9a24b;
  --gold-soft: #e4c77e;
  --gold-pale: #f2dfad;
  --line: rgba(174, 189, 202, 0.16);
  --line-strong: rgba(174, 189, 202, 0.3);
  --gold-line: rgba(201, 162, 75, 0.4);
  --text: #f2ede1;
  --text-2: #b9c5cf;
  --text-3: #7f95a8;
  --surface: rgba(13, 35, 54, 0.78);
  --surface-solid: #0d2336;
  --radius: 6px;
  --radius-sm: 3px;
  --container: 1340px;
  --header: 72px;
  --shadow: 0 24px 70px rgba(0, 7, 16, 0.3);
  --ease: cubic-bezier(0.2, 0.78, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--navy-950);
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(174, 189, 202, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 189, 202, 0.025) 1px, transparent 1px),
    var(--navy-950);
  background-size: 64px 64px;
  color: var(--text-2);
  font-family: "Dubai", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  z-index: 999;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--cursor-x, 70%) var(--cursor-y, 20%), rgba(201, 162, 75, 0.045), transparent 68%);
  mix-blend-mode: screen;
}

::selection { background: rgba(201, 162, 75, 0.35); color: white; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--text); letter-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  background: var(--ivory);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.site-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: var(--page-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale));
  box-shadow: 0 0 14px rgba(228, 199, 126, 0.65);
  pointer-events: none;
}

/* Navigation */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  border-color: var(--line);
  background: rgba(2, 13, 24, 0.83);
  box-shadow: 0 10px 40px rgba(0, 8, 20, 0.2);
  backdrop-filter: blur(20px) saturate(130%);
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: var(--header);
  gap: clamp(24px, 4vw, 64px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ivory);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.brand .arabic { color: var(--gold-soft); font-size: 0.95em; letter-spacing: 0; }

.primary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 650;
}

.primary-nav > a,
.nav-dropdown-toggle {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

.primary-nav > a::after,
.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--gold-soft);
  transition: right 220ms var(--ease);
}
.primary-nav > a:hover::after,
.primary-nav > a[aria-current="page"]::after,
.has-dropdown:hover .nav-dropdown-toggle::after,
.has-dropdown.is-open .nav-dropdown-toggle::after { right: 0; }

.nav-item { position: relative; }
.nav-dropdown-toggle > span {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.has-dropdown.is-open .nav-dropdown-toggle > span { transform: translateY(2px) rotate(225deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  display: grid;
  width: 230px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 21, 38, 0.97);
  padding: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  position: relative;
  border-bottom: 1px solid rgba(174, 189, 202, 0.1);
  padding: 12px 14px;
  color: var(--text-2);
  transition: color 160ms ease, background 160ms ease, padding 160ms ease;
}
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] { background: rgba(201, 162, 75, 0.08); color: var(--ivory); padding-inline-start: 19px; }

.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.language-toggle {
  min-width: 70px;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(242, 237, 225, 0.035);
  color: var(--text-2);
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.language-toggle:hover { border-color: var(--gold-line); background: rgba(201, 162, 75, 0.09); color: var(--ivory); }

.mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(242, 237, 225, 0.035);
  cursor: pointer;
}
.mobile-toggle span { display: block; width: 17px; height: 1px; margin: 5px auto; background: var(--ivory); transition: transform 180ms ease, opacity 180ms ease; }
.site-header.is-open .mobile-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .mobile-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .mobile-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Core typography */
.eyebrow,
.section-kicker,
.label,
.product-code {
  color: var(--gold-soft);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 900px;
  margin-top: 14px;
  font-size: clamp(2.25rem, 4.6vw, 5rem);
  font-weight: 590;
  line-height: 0.98;
}
.section-heading.medium { font-size: clamp(1.9rem, 3.4vw, 3.6rem); }
.section-lede {
  max-width: 720px;
  margin-top: 20px;
  color: var(--text-2);
  font-size: clamp(1rem, 1.35vw, 1.17rem);
}

.button {
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  padding: 10px 17px;
  color: var(--ivory);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1;
  transform: translate(var(--magnetic-x), var(--magnetic-y));
  transition: border-color 180ms ease, background 180ms ease, transform 160ms ease;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.2) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 600ms var(--ease);
}
.button:hover::before { transform: translateX(130%); }
.button.primary { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }
.button.primary:hover { background: var(--gold-soft); }
.button.secondary { background: rgba(242, 237, 225, 0.035); border-color: var(--line-strong); }
.button.secondary:hover { border-color: var(--gold-line); background: rgba(201, 162, 75, 0.08); }

/* Homepage hero */
.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  padding: calc(var(--header) + 52px) 0 130px;
  background:
    radial-gradient(circle at 76% 36%, rgba(75, 113, 143, 0.17), transparent 32%),
    radial-gradient(circle at 66% 62%, rgba(201, 162, 75, 0.08), transparent 28%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(174, 189, 202, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(174, 189, 202, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 70% 45%, black 0, transparent 72%);
  animation: grid-drift 22s linear infinite;
}
.hero::after {
  content: "INSTITUTIONAL AUTHORITY / 01";
  position: absolute;
  left: 24px;
  bottom: 74px;
  color: rgba(174, 189, 202, 0.45);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(34px, 5vw, 88px);
}
.hero-copy { position: relative; z-index: 5; max-width: 620px; }
.hero h1 {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 22px;
  color: var(--ivory);
  font-size: clamp(4.7rem, 8vw, 8.6rem);
  font-weight: 740;
  line-height: 0.74;
}
.hero h1 .arabic { color: var(--gold-soft); font-size: 0.28em; font-weight: 600; }
.hero .headline {
  display: grid;
  margin-top: 36px;
  color: var(--ivory);
  font-size: clamp(1.85rem, 3.2vw, 3.65rem);
  font-weight: 570;
  line-height: 0.98;
}
.hero-headline em { position: relative; font-style: normal; }
.hero-headline em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold-soft); transform-origin: left; animation: underline-in 1s var(--ease) 1.8s both; }
.hero .support { max-width: 560px; margin-top: 24px; color: var(--text-2); font-size: 1.04rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

.pictorial-map {
  --art-x: 0px;
  --art-y: 0px;
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 46% 50%, rgba(201, 162, 75, 0.08), transparent 33%),
    linear-gradient(rgba(174, 189, 202, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 189, 202, 0.04) 1px, transparent 1px),
    rgba(4, 18, 32, 0.72);
  background-size: auto, 52px 52px, 52px 52px, auto;
  box-shadow: inset 0 1px rgba(255,255,255,0.05), 0 40px 90px rgba(0, 6, 15, 0.42);
  transform: translate(var(--art-x), var(--art-y));
  transition: transform 220ms var(--ease);
}
.pictorial-map::before,
.pictorial-map::after { content: ""; position: absolute; border: 1px solid rgba(201, 162, 75, 0.13); border-radius: 50%; pointer-events: none; }
.pictorial-map::before { inset: 10% 13%; animation: orbit-breathe 8s ease-in-out infinite; }
.pictorial-map::after { inset: 23% 5%; border-color: rgba(174, 189, 202, 0.1); animation: orbit-breathe 10s ease-in-out infinite reverse; }

.visual-layer {
  --layer-x: 0px;
  --layer-y: 0px;
  --layer-r: 0deg;
  position: absolute;
  z-index: 2;
  left: 5%;
  width: 73%;
  height: 162px;
  overflow: hidden;
  border: 1px solid rgba(174, 189, 202, 0.2);
  background: linear-gradient(105deg, rgba(28, 58, 83, 0.74), rgba(6, 23, 39, 0.7));
  box-shadow: 0 16px 35px rgba(0, 7, 16, 0.25), inset 0 1px rgba(255,255,255,0.05);
  transform: translate(var(--layer-x), var(--layer-y)) rotate(var(--layer-r));
  transition: border-color 220ms ease, transform 220ms var(--ease), box-shadow 220ms ease;
}
.visual-layer:hover { border-color: rgba(228, 199, 126, 0.5); box-shadow: 0 22px 45px rgba(0,7,16,.34), 0 0 28px rgba(201,162,75,.08); }
.institution-layer { top: 28px; }
.people-layer { top: 229px; }
.ai-layer { top: 430px; }
.scene-icon { position: absolute; left: 2%; top: 6px; width: 64%; height: 148px; overflow: visible; }
.scene-icon path, .scene-icon circle, .scene-icon ellipse { fill: none; stroke: rgba(242,237,225,.72); stroke-width: 1.45; vector-effect: non-scaling-stroke; }
.scene-icon .scene-halo { fill: rgba(174,189,202,.04); stroke: rgba(174,189,202,.13); }
.scene-icon .scene-gold, .scene-icon .signal-dot { stroke: var(--gold-soft); filter: drop-shadow(0 0 5px rgba(228,199,126,.45)); }
.scene-icon .signal-dot { fill: var(--gold-soft); stroke: none; }
.scene-icon .scene-detail { stroke: rgba(174,189,202,.4); }
.layer-caption { position: absolute; right: 4%; top: 50%; width: 31%; transform: translateY(-50%); }
.layer-caption > span { display: block; margin-bottom: 8px; color: var(--gold-soft); font-size: .62rem; font-weight: 800; }
.layer-caption strong, .layer-caption small { display: block; }
.layer-caption strong { color: var(--ivory); font-size: .9rem; text-transform: uppercase; }
.layer-caption small { margin-top: 3px; color: var(--text-3); font-size: .68rem; text-transform: uppercase; }
.supporting-person { opacity: .5; }
.central-person { filter: drop-shadow(0 0 7px rgba(228,199,126,.3)); }
.accountability-ring { stroke-dasharray: 3 7; transform-origin: 110px 69px; animation: svg-spin 28s linear infinite; }
.ai-ring { transform-origin: 105px 70px; animation: svg-spin 30s linear infinite; }
.ring-b { animation-direction: reverse; animation-duration: 36s; }
.ring-c { animation-duration: 40s; }
.ai-sphere { fill: rgba(174,189,202,.08) !important; }
.brain-line { stroke: var(--gold-soft) !important; animation: core-breathe 4s ease-in-out infinite; transform-origin: 105px 70px; }

.authority-thread { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.thread-glow, .thread-line, .thread-energy { fill: none; stroke-linecap: round; }
.thread-glow { stroke: rgba(201,162,75,.13); stroke-width: 12; filter: blur(5px); }
.thread-line { stroke: rgba(228,199,126,.5); stroke-width: 1.4; stroke-dasharray: 5 9; }
.thread-energy { stroke: var(--gold-pale); stroke-width: 3; stroke-dasharray: 10 90; filter: drop-shadow(0 0 6px var(--gold-soft)); animation: authority-flow 6.5s var(--ease) infinite; }
.path-node { position: absolute; z-index: 4; right: 3%; }
.path-node i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 12px rgba(228,199,126,.75); }
.path-node span { display: none; }
.mandate-node { top: 14%; }.authority-node { top: 32%; }.accountability-node { top: 67%; }.operation-node { top: 85%; }
.mizan-marker { position: absolute; z-index: 5; right: -1%; top: 50%; display: flex; align-items: center; gap: 7px; width: 112px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgba(4,18,32,.94); padding: 6px; transform: translateY(-50%); box-shadow: 0 0 30px rgba(201,162,75,.16); }
.mizan-marker > span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--gold-soft); font-size: .65rem; font-weight: 800; }
.mizan-marker strong { color: var(--ivory); font-size: .61rem; letter-spacing: .08em; }
.mizan-marker small { display: block; color: var(--gold-soft); font-size: .42rem; letter-spacing: 0; }
.mizan-marker em { display: none; }
.visual-pulse { position: absolute; z-index: 1; width: 180px; height: 62px; border: 1px solid rgba(228,199,126,.18); border-radius: 50%; animation: signal-pulse 5s ease-out infinite; }
.pulse-one { left: 26%; top: 29%; }.pulse-two { right: 18%; bottom: 12%; animation-delay: 2.4s; }

@keyframes grid-drift { to { background-position: 72px 72px; } }
@keyframes underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes orbit-breathe { 50% { transform: scale(1.035); opacity: .62; } }
@keyframes svg-spin { to { transform: rotate(360deg); } }
@keyframes core-breathe { 50% { transform: scale(1.04); } }
@keyframes authority-flow { 0%,10% { stroke-dashoffset: 100; opacity: 0; } 18%,78% { opacity: 1; } 88%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes signal-pulse { 0% { opacity: 0; transform: scale(.7); } 20% { opacity: .7; } 100% { opacity: 0; transform: scale(1.45); } }


/* Continuous homepage chapters */
main { position: relative; overflow: clip; }
.section {
  position: relative;
  padding: 128px 0;
  border-top: 1px solid var(--line);
}
.section.compact { padding-block: 88px; }
.section > .container { position: relative; z-index: 2; }
.section::after {
  content: "";
  position: absolute;
  top: 0;
  right: max(24px, calc((100vw - var(--container)) / 2));
  width: 54px;
  height: 1px;
  background: var(--gold);
}

.scroll-story {
  z-index: 8;
  margin-top: -58px;
  border-top: 0;
  padding-block: 0 76px;
  background: transparent;
}
.scroll-story::after { display: none; }
.scroll-story .container {
  border: 1px solid var(--line-strong);
  background: rgba(6, 21, 38, 0.92);
  padding: 36px 42px 30px;
  box-shadow: 0 28px 70px rgba(0, 6, 15, 0.34);
  backdrop-filter: blur(18px);
}
.scroll-story .section-heading { max-width: 720px; font-size: clamp(1.6rem, 2.8vw, 3rem); }
.story-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 34px;
  border-top: 1px solid var(--line-strong);
}
.story-rail::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--story-progress, 25%);
  height: 1px;
  background: var(--gold-soft);
  box-shadow: 0 0 14px rgba(228, 199, 126, 0.5);
  transition: width 500ms var(--ease);
}
.story-step { position: relative; min-height: 116px; border-right: 1px solid var(--line); padding: 25px 24px 6px 0; }
.story-step:last-child { border-right: 0; }
.story-step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border: 1px solid var(--gold-soft); border-radius: 50%; background: var(--navy-900); }
.story-step b, .story-step span { display: block; }
.story-step b { color: var(--ivory); font-size: 0.83rem; text-transform: uppercase; }
.story-step span { max-width: 190px; margin-top: 7px; color: var(--text-3); font-size: 0.82rem; }

/* Editorial problem band */
#problem {
  overflow: hidden;
  border-top-color: rgba(13, 33, 51, 0.12);
  background: var(--paper);
  color: #536474;
}
#problem::before {
  content: "01";
  position: absolute;
  right: -0.025em;
  bottom: -0.27em;
  color: rgba(13, 33, 51, 0.035);
  font-size: clamp(18rem, 38vw, 40rem);
  font-weight: 800;
  line-height: 1;
}
#problem::after { background: var(--gold); }
#problem h2, #problem h3 { color: var(--ink); }
#problem .section-kicker { color: #8d6a1f; }
#problem .section-lede { color: #506374; }
.failure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1020px;
  margin: 68px 0 0 auto;
  border-top: 1px solid rgba(13, 33, 51, 0.22);
  border-left: 1px solid rgba(13, 33, 51, 0.22);
}
.failure-card {
  position: relative;
  min-height: 230px;
  border-right: 1px solid rgba(13, 33, 51, 0.22);
  border-bottom: 1px solid rgba(13, 33, 51, 0.22);
  padding: 38px;
  transition: color 220ms ease, background 220ms ease;
}
.failure-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--gold); transition: width 420ms var(--ease); }
.failure-card:hover { background: rgba(255,255,255,.36); }
.failure-card:hover::after { width: 100%; }
.failure-card .tag { display: block; color: #8d6a1f; font-size: .68rem; font-weight: 800; }
.failure-card h3 { margin-top: 38px; font-size: 1.35rem; }
.failure-card p { max-width: 410px; margin-top: 10px; color: #596a78; font-size: .92rem; }

/* Product ecosystem */
#ecosystem {
  overflow: hidden;
  min-height: 920px;
  background:
    radial-gradient(circle at 50% 58%, rgba(201,162,75,.09), transparent 28%),
    linear-gradient(110deg, var(--navy-950), var(--navy-850) 58%, var(--navy-950));
}
#ecosystem::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 11.9%, rgba(174,189,202,.025) 12%); }
#ecosystem .section-lede { max-width: 660px; }
.ecosystem-orbit {
  position: relative;
  min-height: 580px;
  max-width: 1080px;
  margin: 18px auto 0;
}
.orbit-ring {
  position: absolute;
  inset: 12% 4%;
  border: 1px solid rgba(174,189,202,.19);
  border-radius: 50%;
  animation: orbit-breathe 8s ease-in-out infinite;
}
.orbit-ring.second { inset: 23% 16%; border-color: rgba(201,162,75,.25); animation-delay: -3s; }
.orbit-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 14px var(--gold-soft);
  animation: perimeter-pulse 6s ease-in-out infinite;
}
.orbit-center,
.orbit-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.orbit-center {
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, rgba(228,199,126,.13), rgba(13,35,54,.94) 64%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px rgba(201,162,75,.1), inset 0 0 45px rgba(201,162,75,.04);
}
.orbit-center::before, .orbit-center::after { content: ""; position: absolute; border: 1px solid rgba(201,162,75,.16); border-radius: 50%; animation: signal-pulse 5s ease-out infinite; }
.orbit-center::before { inset: -20px; }
.orbit-center::after { inset: -48px; animation-delay: 1.7s; }
.orbit-center strong { color: var(--ivory); font-size: 1.55rem; }
.orbit-center span { max-width: 160px; margin-top: 8px; color: var(--text-3); font-size: .75rem; }
.orbit-node {
  z-index: 4;
  width: 168px;
  height: 168px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(16,40,62,.88);
  box-shadow: 0 18px 40px rgba(0,8,18,.28);
  transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease, transform 350ms var(--ease);
}
.orbit-node:nth-of-type(1) { left: 3%; top: 8%; }
.orbit-node:nth-of-type(2) { right: 2%; top: 9%; }
.orbit-node:nth-of-type(3) { right: 0; bottom: 6%; }
.orbit-node:nth-of-type(4) { left: 4%; bottom: 2%; }
.orbit-node strong { color: var(--ivory); font-size: 1.12rem; }
.orbit-node span { margin-top: 5px; color: var(--text-3); font-size: .78rem; }
.orbit-node:hover, .orbit-node.is-active { border-color: var(--gold-soft); background: rgba(28,58,83,.97); box-shadow: 0 0 0 7px rgba(201,162,75,.06), 0 22px 45px rgba(0,8,18,.36); transform: translateY(-7px); }
.orbit-detail {
  max-width: 760px;
  min-height: 76px;
  margin: -28px auto 0;
  border-top: 1px solid var(--gold-line);
  padding: 24px 34px 0;
  color: var(--text-2);
  text-align: center;
  font-size: .92rem;
}

/* Architecture workspace */
#platform { background: #0b2034; }
.architecture-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: stretch;
  margin-top: 64px;
  border: 1px solid var(--line-strong);
  background: rgba(2,13,24,.46);
  padding: clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow);
}
.layer-stack { position: relative; display: grid; gap: 12px; padding-left: 34px; }
.stack-line { position: absolute; z-index: 0; left: 8px; top: 36px; bottom: 36px; width: 1px; background: linear-gradient(var(--gold), rgba(174,189,202,.14)); }
.stack-line::before { content: ""; position: absolute; left: -4px; top: var(--stack-point, 35%); width: 9px; height: 9px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 18px var(--gold); transition: top 350ms var(--ease); }
.arch-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 102px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(24,59,88,.55), rgba(6,21,38,.6));
  padding: 20px 24px;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 240ms var(--ease);
}
.arch-layer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201,162,75,.13), transparent 56%); opacity: 0; transition: opacity 220ms ease; }
.arch-layer:hover { transform: translateX(7px); border-color: var(--line-strong); }
.arch-layer.is-active { border-color: var(--gold-line); color: var(--ivory); }
.arch-layer.is-active::before { opacity: 1; }
.arch-layer span { position: relative; display: block; color: inherit; font-size: .82rem; font-weight: 780; text-transform: uppercase; }
.arch-layer small { display: block; margin-top: 8px; color: var(--text-3); font-size: .72rem; font-weight: 500; text-transform: none; }
.layer-copy { position: relative; min-height: 280px; border-top: 1px solid var(--gold-line); padding-top: 28px; }
.layer-copy::before { content: "ACTIVE LAYER"; display: block; margin-bottom: 40px; color: var(--gold-soft); font-size: .6rem; font-weight: 800; letter-spacing: .14em; }
.layer-copy h3 { font-size: clamp(1.55rem, 2.4vw, 2.5rem); font-weight: 590; }
.layer-copy p { margin-top: 16px; color: var(--text-2); font-size: .92rem; }
.distinction { border-top: 1px solid var(--line); padding-top: 22px; color: var(--ivory); font-size: .84rem; font-weight: 700; }

/* Authority graph */
#record { background: var(--paper); color: #536474; }
#record h2, #record h3 { color: var(--ink); }
#record .section-kicker { color: #8d6a1f; }
#record .section-lede { color: #526574; }
.record-graph {
  position: relative;
  min-height: 650px;
  margin-top: 64px;
  border: 1px solid rgba(13,33,51,.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(201,162,75,.12), transparent 25%),
    linear-gradient(rgba(13,33,51,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,33,51,.055) 1px, transparent 1px),
    rgba(255,255,255,.2);
  background-size: auto, 56px 56px, 56px 56px, auto;
}
.graph-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
.record-graph.is-visible .graph-lines path { stroke-dashoffset: 0; }
.graph-node {
  position: absolute;
  display: grid;
  align-content: center;
  width: 184px;
  min-height: 92px;
  border: 1px solid rgba(13,33,51,.23);
  background: rgba(242,237,225,.88);
  padding: 15px 17px;
  box-shadow: 0 16px 30px rgba(13,33,51,.08);
  transition: transform 240ms var(--ease), border-color 240ms ease;
}
.graph-node:hover { transform: translateY(-5px); border-color: var(--gold); }
.graph-node strong { color: var(--ink); font-size: .79rem; }
.graph-node span { margin-top: 5px; color: #5e6e7b; font-size: .67rem; line-height: 1.35; }
.graph-node.core { z-index: 4; left: 50%; top: 50%; width: 238px; min-height: 132px; border-color: var(--gold); background: var(--ink); transform: translate(-50%,-50%); box-shadow: 0 24px 54px rgba(13,33,51,.25), 0 0 0 10px rgba(201,162,75,.08); }
.graph-node.core:hover { transform: translate(-50%, calc(-50% - 5px)); }
.graph-node.core strong { color: var(--ivory); font-size: 1rem; }
.graph-node.core span { color: var(--steel-300); }
.graph-node:nth-of-type(2) { left: 3%; top: 9%; }
.graph-node:nth-of-type(3) { left: 40%; top: 3%; }
.graph-node:nth-of-type(4) { right: 3%; top: 10%; }
.graph-node:nth-of-type(5) { left: 2%; top: 43%; }
.graph-node:nth-of-type(6) { right: 2%; top: 43%; }
.graph-node:nth-of-type(7) { left: 5%; bottom: 7%; }
.graph-node:nth-of-type(8) { left: 41%; bottom: 2%; }
.graph-node:nth-of-type(9) { right: 5%; bottom: 7%; }

@keyframes perimeter-pulse { 0%,100% { transform: translateY(-18px); opacity: .35; } 50% { transform: translateY(18px); opacity: 1; } }


/* Lifecycle and evidence */
#expiry { background: linear-gradient(125deg, #061526 0%, #0d273d 100%); }
.lifecycle {
  display: grid;
  grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr);
  gap: 54px;
  margin-top: 60px;
}
.life-steps { position: relative; display: grid; }
.life-steps::before { content: ""; position: absolute; left: 17px; top: 24px; bottom: 24px; width: 1px; background: var(--line-strong); }
.life-step { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 17px; min-height: 66px; border: 0; background: transparent; padding: 7px 0; color: var(--text-3); text-align: left; cursor: pointer; }
.life-step .dot { position: relative; z-index: 2; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--navy-850); font-size: .57rem; font-weight: 800; transition: all 220ms ease; }
.life-step:hover, .life-step.is-active { color: var(--ivory); }
.life-step.is-active .dot { border-color: var(--gold-soft); background: var(--gold); color: var(--navy-950); box-shadow: 0 0 22px rgba(201,162,75,.32); }
.life-stage { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--line-strong); background: rgba(2,13,24,.5); padding: clamp(32px,5vw,66px); }
.life-stage::before { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border: 1px solid rgba(201,162,75,.18); border-radius: 50%; box-shadow: 0 0 0 36px rgba(201,162,75,.035), 0 0 0 72px rgba(201,162,75,.025); }
.life-stage h3 { position: relative; max-width: 470px; font-size: clamp(2rem,4vw,4.5rem); font-weight: 590; line-height: 1; }
.life-stage > p { position: relative; max-width: 570px; margin-top: 20px; color: var(--text-2); }
.life-meta { position: relative; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 70px; border-top: 1px solid var(--line); }
.life-meta > div { min-height: 104px; border-right: 1px solid var(--line); padding: 19px 16px 0 0; }
.life-meta > div:last-child { border-right: 0; }
.life-meta b, .life-meta span { display: block; }
.life-meta b { color: var(--gold-soft); font-size: .58rem; }
.life-meta span { margin-top: 9px; color: var(--ivory); font-size: .76rem; }

#evidence { background: #0a1b2d; }
.evidence-system { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.7fr); gap: 28px; margin-top: 58px; }
.evidence-flow { counter-reset: evidence; display: grid; border-top: 1px solid var(--line-strong); }
.evidence-node {
  counter-increment: evidence;
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px,.45fr) 1fr;
  gap: 28px;
  min-height: 84px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 19px 44px 19px 52px;
  color: var(--text-3);
  text-align: left;
  cursor: pointer;
  transition: background 190ms ease, color 190ms ease, padding 260ms var(--ease);
}
.evidence-node::before { content: "0" counter(evidence); position: absolute; left: 0; top: 22px; color: var(--gold-soft); font-size: .62rem; font-weight: 800; }
.evidence-node::after { content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease); }
.evidence-node b { color: var(--ivory); font-size: .85rem; }
.evidence-node span { font-size: .76rem; }
.evidence-node:hover, .evidence-node.is-active { background: rgba(201,162,75,.065); color: var(--text-2); padding-left: 60px; }
.evidence-node.is-active::after { transform: scaleX(1); }
.metadata-panel { position: relative; overflow: hidden; border: 1px solid var(--gold-line); background: rgba(16,40,62,.72); padding: 32px; box-shadow: var(--shadow); }
.metadata-panel::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 210px; height: 210px; border: 1px solid rgba(228,199,126,.18); border-radius: 50%; box-shadow: 0 0 0 24px rgba(201,162,75,.025); }
.metadata-panel h2, .metadata-panel h3 { margin-top: 14px; font-size: 1.85rem; }
.metadata-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,1fr); margin-top: 30px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.metadata-grid > div { min-height: 76px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px; }
.metadata-grid b, .metadata-grid span { display: block; }
.metadata-grid b { color: var(--text-3); font-size: .58rem; text-transform: uppercase; }
.metadata-grid span { margin-top: 5px; color: var(--ivory); font-size: .68rem; line-height: 1.35; }

/* Enterprise console */
#product { background: linear-gradient(180deg, var(--navy-950), #071a2d); }
.product-frame {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #071828;
  box-shadow: 0 40px 100px rgba(0,6,15,.48);
}
.product-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(201,162,75,.075), transparent 68%); }
.product-topbar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); padding: 0 20px; color: var(--text-3); font-size: .66rem; }
.product-topbar > strong { color: var(--text-2); font-size: .66rem; text-transform: uppercase; }
.product-topbar > .tag { justify-self: end; border: 1px solid var(--gold-line); padding: 4px 8px; color: var(--gold-soft); }
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.window-dots span:first-child { background: var(--gold); }
.product-body { position: relative; z-index: 2; display: grid; grid-template-columns: 210px 1fr; min-height: 610px; }
.product-nav { display: grid; align-content: start; border-right: 1px solid var(--line); padding: 22px 12px; }
.product-nav button { position: relative; min-height: 42px; border: 0; background: transparent; padding: 9px 13px; color: var(--text-3); font-size: .72rem; text-align: left; cursor: pointer; }
.product-nav button::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--gold); transform: scaleY(0); transition: transform 180ms ease; }
.product-nav button:hover, .product-nav button.is-active { background: rgba(201,162,75,.06); color: var(--ivory); }
.product-nav button.is-active::before { transform: scaleY(1); }
.product-main { padding: clamp(22px,3vw,42px); }
.record-summary { display: grid; grid-template-columns: 1fr 230px; gap: 30px; align-items: stretch; }
.record-title { border-bottom: 1px solid var(--line); padding-bottom: 32px; }
.record-title h3 { margin-top: 8px; font-size: 1.65rem; }
.record-title p { max-width: 660px; margin-top: 9px; color: var(--text-3); font-size: .75rem; }
.status-box { border: 1px solid var(--gold-line); padding: 20px; background: rgba(201,162,75,.055); }
.status-box b, .status-box strong, .status-box p { display: block; }
.status-box b { color: var(--text-3); font-size: .58rem; text-transform: uppercase; }
.status-box strong { margin-top: 18px; color: var(--gold-soft); font-size: 1.25rem; }
.status-box p { margin-top: 3px; color: var(--text-3); font-size: .65rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 34px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.metric { min-height: 94px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px; }
.metric span, .metric strong { display: block; }
.metric strong { margin-top: 13px; color: var(--ivory); font-size: .79rem; }
.product-panels { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 30px; }
.product-panel { border: 1px solid var(--line); padding: 20px; background: rgba(16,40,62,.34); }
.product-panel.alert { border-color: var(--gold-line); background: rgba(201,162,75,.055); }
.product-panel h4 { color: var(--ivory); font-size: .76rem; }
.product-panel ul { list-style: none; margin: 17px 0 0; padding: 0; }
.product-panel li { display: grid; gap: 4px; border-top: 1px solid var(--line); padding: 11px 0; font-size: .63rem; }
.product-panel li span { color: var(--text-3); }
.product-panel li strong { color: var(--text-2); font-weight: 650; }


/* Shared page framework */
.sub-hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  padding: calc(var(--header) + 116px) 0 110px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 44%, rgba(64,101,132,.24), transparent 28%),
    linear-gradient(112deg, var(--navy-950) 0 48%, var(--navy-850));
}
.sub-hero::before { content: ""; position: absolute; right: 4vw; top: 19%; width: min(44vw,620px); aspect-ratio: 1; border: 1px solid rgba(174,189,202,.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(174,189,202,.025), 0 0 0 140px rgba(201,162,75,.018); animation: orbit-breathe 9s ease-in-out infinite; }
.sub-hero::after { content: ""; position: absolute; right: 12%; top: 25%; width: min(29vw,410px); aspect-ratio: 1; background: linear-gradient(rgba(174,189,202,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(174,189,202,.08) 1px, transparent 1px); background-size: 36px 36px; transform: perspective(500px) rotateX(62deg) rotateZ(-18deg); mask-image: radial-gradient(circle, #000 25%, transparent 74%); }
.enterprise-hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,760px) 1fr; align-content: center; min-height: 430px; }
.enterprise-hero .eyebrow, .enterprise-hero h1, .enterprise-hero .section-lede, .enterprise-proof, .product-code, .product-statement { grid-column: 1; }
.enterprise-hero h1 { max-width: 850px; margin-top: 22px; font-size: clamp(3.2rem,6vw,6.5rem); font-weight: 600; line-height: .95; }
.enterprise-hero .section-lede { max-width: 680px; margin-top: 28px; }
.enterprise-proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--line-strong); }
.enterprise-proof span { min-width: 128px; border-right: 1px solid var(--line); padding: 15px 20px 3px 0; color: var(--text-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.product-code { margin-bottom: 4px; }
.product-statement { max-width: 620px; margin-top: 22px; color: var(--gold-soft); font-size: clamp(1.25rem,2vw,1.75rem); }
.product-detail::before { border-radius: 0; transform: rotate(45deg); animation: product-geometry 12s ease-in-out infinite; }
.qudra-page { --product-accent: #d6b65f; }
.mutamad-page { --product-accent: #aebdca; }
.isnad-page { --product-accent: #80a8bd; }
.misbar-page { --product-accent: #c5a86a; }
.product-detail h1 { color: var(--product-accent,var(--ivory)); }

.enterprise-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 64px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.enterprise-module {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 28px;
  background: radial-gradient(320px circle at var(--spot-x) var(--spot-y), rgba(201,162,75,.08), transparent 70%);
  transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
  transition: border-color 220ms ease, background 220ms ease, transform 180ms ease;
}
.enterprise-module::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease); }
.enterprise-module:hover { border-color: var(--gold-line); }
.enterprise-module:hover::after { transform: scaleX(1); }
.enterprise-module > span { color: var(--gold-soft); font-size: .65rem; font-weight: 800; }
.enterprise-module h3 { margin-top: 90px; font-size: 1.25rem; font-weight: 620; }
.enterprise-module p { margin-top: 13px; color: var(--text-3); font-size: .86rem; }

.enterprise-band { background: #0c2236; }
.page-grid { display: grid; grid-template-columns: minmax(240px,.52fr) minmax(0,1.48fr); gap: clamp(50px,9vw,130px); }
.side-note { position: relative; border-top: 1px solid var(--gold-line); padding-top: 24px; }
.side-note::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 14px rgba(228,199,126,.6); }
.side-note p { margin-top: 22px; color: var(--ivory); font-size: clamp(1.15rem,1.8vw,1.65rem); line-height: 1.35; }
.content-stack { border-top: 1px solid var(--line-strong); }
.feature-row { display: grid; grid-template-columns: minmax(120px,.35fr) 1fr; gap: 34px; min-height: 112px; border-bottom: 1px solid var(--line); padding: 26px 0; transition: padding 220ms var(--ease), background 220ms ease; }
.feature-row:hover { background: rgba(201,162,75,.035); padding-inline: 14px; }
.feature-row b { color: var(--ivory); font-size: .85rem; }
.feature-row p { color: var(--text-3); font-size: .9rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.card {
  --spot-x: 50%; --spot-y: 50%;
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: radial-gradient(300px circle at var(--spot-x) var(--spot-y), rgba(201,162,75,.075), transparent 70%), rgba(16,40,62,.42);
  padding: 30px;
  transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
  transition: border-color 200ms ease, transform 180ms ease;
}
.card:hover { border-color: var(--gold-line); }
.card h2, .card h3 { font-size: 1.2rem; }
.card p { margin-top: 13px; color: var(--text-3); font-size: .86rem; }

.process-line { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 54px; border-top: 1px solid var(--line-strong); }
.process-line > * { position: relative; min-height: 190px; border-right: 1px solid var(--line); padding: 28px 24px 20px 0; }
.process-line > *:last-child { border-right: 0; }
.process-line > *::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border: 1px solid var(--gold-soft); border-radius: 50%; background: var(--navy-950); }
.process-line h3 { margin-top: 38px; font-size: 1rem; }
.process-line p { margin-top: 10px; color: var(--text-3); font-size: .8rem; }

.industry-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 60px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.industry-item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; min-height: 210px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px; transition: background 200ms ease, transform 220ms var(--ease); }
.industry-item:hover { background: rgba(201,162,75,.055); transform: translateY(-3px); }
.industry-item > span { color: var(--gold-soft); font-size: .65rem; font-weight: 800; }
.industry-item h3 { font-size: 1.15rem; }
.industry-item p { margin-top: 12px; color: var(--text-3); font-size: .85rem; }

.leadership-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 48px; }
.leader-card { min-height: 370px; }
.leader-card h2 { margin-top: 42px; font-size: 2rem; }
.leader-card ul { margin: 30px 0 0; padding: 0; list-style: none; }
.leader-card li { border-top: 1px solid var(--line); padding: 12px 0; color: var(--text-3); font-size: .84rem; }

/* Contact and research */
.contact-layout { display: grid; grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); gap: clamp(50px,9vw,130px); }
.contact-points { display: grid; margin-top: 34px; border-top: 1px solid var(--line-strong); }
.contact-points > * { border-bottom: 1px solid var(--line); padding: 17px 0; color: var(--text-2); font-size: .8rem; }
.contact-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; border: 1px solid var(--line-strong); background: rgba(6,21,38,.58); padding: clamp(24px,4vw,46px); }
.field { display: grid; gap: 8px; }
.field:last-of-type, .contact-form .button, .form-note { grid-column: 1 / -1; }
.field label { color: var(--text-2); font-size: .72rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(2,13,24,.62); padding: 10px 13px; color: var(--ivory); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(201,162,75,.08); }
.contact-form .button { justify-self: start; }
.form-note { min-height: 24px; color: var(--gold-soft); font-size: .75rem; }
.research-soon { position: relative; min-height: calc(100vh - 80px); display: grid; place-items: center; overflow: hidden; padding: calc(var(--header) + 60px) 0 90px; }
.research-soon::before, .research-soon::after { content: ""; position: absolute; border: 1px solid rgba(201,162,75,.18); border-radius: 50%; }
.research-soon::before { width: min(66vw,800px); aspect-ratio: 1; animation: orbit-breathe 8s ease-in-out infinite; }
.research-soon::after { width: min(42vw,520px); aspect-ratio: 1; box-shadow: 0 0 90px rgba(201,162,75,.08); }
.research-soon-inner { position: relative; z-index: 2; text-align: center; }
.research-soon h1 { max-width: 850px; margin: 20px auto 0; font-size: clamp(3.4rem,8vw,8rem); font-weight: 590; line-height: .92; }

/* CTA and footer */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--gold-line); background: var(--ivory); color: var(--ink); }
.cta-band::before { content: ""; position: absolute; right: -120px; top: 50%; width: 430px; height: 430px; border: 1px solid rgba(13,33,51,.12); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 62px rgba(13,33,51,.025), 0 0 0 124px rgba(13,33,51,.018); }
.cta-box { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; padding-block: 84px; }
.cta-box h2 { max-width: 820px; margin-top: 12px; color: var(--ink); font-size: clamp(1.8rem,3.4vw,3.65rem); font-weight: 590; line-height: 1.05; }
.cta-box p { margin-top: 14px; color: #62717d; }
.cta-box .hero-actions { flex-wrap: nowrap; }
.cta-band .button.secondary { border-color: rgba(13,33,51,.24); color: var(--ink); background: transparent; }

.site-footer { position: relative; border-top: 1px solid var(--line); background: #020b14; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(174,189,202,.025) 1px, transparent 1px); background-size: 64px; pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: minmax(210px,.65fr) minmax(0,1.35fr); gap: 70px; align-items: start; min-height: 270px; padding-block: 64px 52px; }
.footer-grid > .brand { align-self: start; font-size: 1.15rem; }
.footer-links { display: grid; grid-template-columns: repeat(3,minmax(110px,1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.footer-links a { min-height: 54px; border-bottom: 1px solid var(--line); padding: 17px 16px 12px 0; color: var(--text-3); font-size: .78rem; transition: color 180ms ease, padding 180ms ease; }
.footer-links a:hover { color: var(--ivory); padding-inline-start: 8px; }

/* Scroll reveal and contextual rail */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.section-nav { position: fixed; z-index: 700; right: 18px; top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.section-nav button { position: relative; width: 18px; height: 12px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.section-nav button::before { content: ""; position: absolute; right: 0; top: 5px; width: 7px; height: 1px; background: var(--text-3); transition: width 180ms ease, background 180ms ease; }
.section-nav button:hover::before, .section-nav button.is-active::before { width: 16px; background: var(--gold-soft); }
.section-nav span { position: absolute; right: 25px; top: -5px; width: max-content; opacity: 0; color: var(--text-3); font-size: .56rem; font-weight: 700; text-transform: uppercase; pointer-events: none; transition: opacity 180ms ease; }
.section-nav button:hover span { opacity: 1; }

@keyframes product-geometry { 0%,100% { transform: rotate(45deg) scale(.92); } 50% { transform: rotate(52deg) scale(1.04); } }


/* Arabic and bidirectional layouts */
html[dir="rtl"] body { font-family: "Dubai", "Tahoma", "Segoe UI", Arial, sans-serif; }
html[dir="rtl"] .primary-nav,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .enterprise-proof { direction: rtl; }
html[dir="rtl"] .section-heading,
html[dir="rtl"] .section-lede,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .enterprise-hero .container,
html[dir="rtl"] .side-note,
html[dir="rtl"] .feature-row,
html[dir="rtl"] .industry-item,
html[dir="rtl"] .enterprise-module,
html[dir="rtl"] .card,
html[dir="rtl"] .contact-layout { text-align: right; }
html[dir="rtl"] .hero-grid { grid-template-columns: minmax(560px,1.22fr) minmax(0,.78fr); }
html[dir="rtl"] .hero-copy { grid-column: 2; grid-row: 1; }
html[dir="rtl"] .hero-art { grid-column: 1; grid-row: 1; }
html[dir="rtl"] .hero h1 { direction: ltr; justify-content: flex-end; }
html[dir="rtl"] .hero-headline { direction: rtl; }
html[dir="rtl"] .failure-grid { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .story-step { border-right: 0; border-left: 1px solid var(--line); padding-left: 24px; padding-right: 0; }
html[dir="rtl"] .story-step:last-child { border-left: 0; }
html[dir="rtl"] .layer-stack { padding-left: 0; padding-right: 34px; }
html[dir="rtl"] .stack-line { left: auto; right: 8px; }
html[dir="rtl"] .arch-layer { text-align: right; }
html[dir="rtl"] .arch-layer:hover { transform: translateX(-7px); }
html[dir="rtl"] .life-steps::before { left: auto; right: 17px; }
html[dir="rtl"] .life-step { text-align: right; }
html[dir="rtl"] .life-meta > div { border-right: 0; border-left: 1px solid var(--line); padding-left: 16px; padding-right: 0; }
html[dir="rtl"] .life-meta > div:last-child { border-left: 0; }
html[dir="rtl"] .evidence-flow { direction: rtl; }
html[dir="rtl"] .evidence-node { padding-left: 52px; padding-right: 52px; text-align: right; }
html[dir="rtl"] .evidence-node::before { left: auto; right: 0; }
html[dir="rtl"] .evidence-node::after { left: 8px; right: auto; transform-origin: left; }
html[dir="rtl"] .product-nav { border-left: 1px solid var(--line); border-right: 0; }
html[dir="rtl"] .product-nav button { text-align: right; }
html[dir="rtl"] .product-nav button::before { left: auto; right: 0; }
html[dir="rtl"] .page-grid,
html[dir="rtl"] .contact-layout { direction: rtl; }
html[dir="rtl"] .side-note::before { left: auto; right: 0; }
html[dir="rtl"] .footer-links a { padding-left: 16px; padding-right: 0; }
html[dir="rtl"] .section-nav { left: 18px; right: auto; }
html[dir="rtl"] .section-nav button::before { left: 0; right: auto; }
html[dir="rtl"] .section-nav span { left: 25px; right: auto; }

@media (max-width: 1080px) {
  :root { --container: 940px; }
  .hero { min-height: auto; padding-bottom: 120px; }
  .hero-grid { grid-template-columns: minmax(0,.82fr) minmax(470px,1.18fr); gap: 34px; }
  .hero h1 { font-size: clamp(4rem,8vw,6rem); }
  .pictorial-map { min-height: 560px; }
  .visual-layer { height: 146px; }
  .institution-layer { top: 26px; }.people-layer { top: 207px; }.ai-layer { top: 388px; }
  .scene-icon { height: 136px; }
  .enterprise-grid { grid-template-columns: repeat(2,1fr); }
  .enterprise-module { min-height: 270px; }
  .enterprise-module h3 { margin-top: 54px; }
  .record-graph { min-height: 610px; }
  .graph-node { width: 156px; }
  .architecture-panel { grid-template-columns: 1fr; }
  .layer-copy { min-height: auto; }
  .section-nav { display: none; }
}

@media (max-width: 760px) {
  :root { --header: 64px; }
  .container { width: min(calc(100% - 34px), var(--container)); }
  body::before { display: none; }
  .nav-shell { grid-template-columns: auto 1fr auto; gap: 12px; }
  .primary-nav { position: fixed; inset: var(--header) 0 auto; display: grid; justify-content: stretch; gap: 0; max-height: calc(100vh - var(--header)); overflow-y: auto; border-bottom: 1px solid var(--line-strong); background: rgba(2,13,24,.985); padding: 14px 18px 24px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; }
  .site-header.is-open .primary-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav > a, .nav-dropdown-toggle { width: 100%; min-height: 48px; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .primary-nav > a::after, .nav-dropdown-toggle::after { display: none; }
  .nav-dropdown { position: static; width: 100%; max-height: 0; overflow: hidden; border: 0; background: rgba(16,40,62,.4); padding: 0 14px; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height 240ms var(--ease), padding 240ms ease; }
  .has-dropdown.is-open .nav-dropdown { max-height: 250px; padding-block: 6px; }
  .mobile-toggle { display: block; }
  .language-toggle { min-width: 60px; }
  .section { padding-block: 86px; }
  .section.compact { padding-block: 68px; }
  .section-heading { font-size: clamp(2.1rem,10vw,3.25rem); }
  .section-lede { font-size: .96rem; }
  .hero { min-height: auto; padding: calc(var(--header) + 50px) 0 96px; }
  .hero::after { display: none; }
  .hero-grid, html[dir="rtl"] .hero-grid { display: flex; flex-direction: column; gap: 54px; }
  .hero-copy, html[dir="rtl"] .hero-copy { width: 100%; order: 1; text-align: inherit; }
  .hero-art, html[dir="rtl"] .hero-art { width: 100%; order: 2; }
  .hero h1 { margin-top: 18px; font-size: clamp(4rem,22vw,6rem); }
  html[dir="rtl"] .hero h1 { justify-content: flex-start; }
  .hero .headline { font-size: clamp(2rem,9.5vw,3.1rem); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .pictorial-map { min-height: 500px; }
  .visual-layer { left: 4%; width: 82%; height: 132px; }
  .institution-layer { top: 23px; }.people-layer { top: 184px; }.ai-layer { top: 345px; }
  .scene-icon { width: 64%; height: 122px; }
  .layer-caption { right: 3%; width: 34%; }
  .mizan-marker { right: -4px; }
  .scroll-story { margin-top: -38px; padding-bottom: 52px; }
  .scroll-story .container { padding: 28px 22px; }
  .story-rail { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-strong); }
  .story-rail::before { top: 0; left: -1px; width: 1px; height: var(--story-progress,25%); transition: height 500ms var(--ease); }
  .story-step, html[dir="rtl"] .story-step { min-height: 94px; border: 0; border-bottom: 1px solid var(--line); padding: 19px 18px 15px 24px; }
  .story-step::before { top: 20px; left: -5px; }
  .failure-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .failure-card { min-height: 190px; padding: 28px; }
  .failure-card h3 { margin-top: 27px; }
  #ecosystem { min-height: auto; }
  .ecosystem-orbit { min-height: 650px; margin-top: 28px; }
  .orbit-ring { inset: 11% 0; }
  .orbit-ring.second { inset: 22% 11%; }
  .orbit-center { width: 170px; height: 170px; }
  .orbit-center span { max-width: 125px; }
  .orbit-node { width: 116px; height: 116px; }
  .orbit-node:nth-of-type(1) { left: 0; top: 4%; }
  .orbit-node:nth-of-type(2) { right: 0; top: 8%; }
  .orbit-node:nth-of-type(3) { right: 0; bottom: 4%; }
  .orbit-node:nth-of-type(4) { left: 0; bottom: 6%; }
  .orbit-node strong { font-size: .9rem; }
  .orbit-node span { font-size: .64rem; }
  .orbit-detail { margin-top: -24px; padding-inline: 10px; }
  .architecture-panel { margin-top: 42px; padding: 18px; }
  .layer-stack { padding-left: 24px; }
  html[dir="rtl"] .layer-stack { padding-right: 24px; }
  .arch-layer { min-height: 96px; padding: 16px; }
  .record-graph { display: grid; min-height: auto; gap: 9px; border: 0; background: none; }
  .graph-lines { display: none; }
  .graph-node, .graph-node.core, .graph-node:nth-of-type(n) { position: static; width: 100%; min-height: 92px; transform: none; }
  .graph-node.core { order: -1; min-height: 120px; }
  .graph-node:hover, .graph-node.core:hover { transform: none; }
  .lifecycle { grid-template-columns: 1fr; gap: 32px; }
  .life-steps { grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
  .life-steps::before { display: none; }
  .life-step { grid-template-columns: 1fr; gap: 6px; min-height: 104px; justify-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 7px; text-align: center; font-size: .68rem; }
  .life-step:nth-child(3n) { border-right: 0; }
  .life-stage { min-height: 390px; padding: 28px; }
  .life-meta { grid-template-columns: 1fr; margin-top: 42px; }
  .life-meta > div, html[dir="rtl"] .life-meta > div { min-height: 68px; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); padding: 13px 0; }
  .evidence-system { grid-template-columns: 1fr; }
  .evidence-node { grid-template-columns: 1fr; gap: 3px; min-height: 78px; padding: 15px 35px; }
  html[dir="rtl"] .evidence-node { padding-inline: 35px; }
  .metadata-panel { padding: 24px; }
  .product-topbar { grid-template-columns: 1fr auto; }
  .product-topbar > strong { display: none; }
  .product-body { grid-template-columns: 1fr; }
  .product-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; scrollbar-width: none; }
  html[dir="rtl"] .product-nav { border-left: 0; }
  .product-nav button { flex: 0 0 auto; }
  .record-summary { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .product-panels { grid-template-columns: 1fr; }
  .sub-hero { min-height: 620px; padding: calc(var(--header) + 78px) 0 76px; }
  .sub-hero::before { right: -32%; top: 36%; width: 110vw; }
  .sub-hero::after { right: -24%; top: 39%; width: 86vw; }
  .enterprise-hero .container { display: block; min-height: auto; }
  .enterprise-hero h1 { font-size: clamp(3rem,15vw,5.2rem); }
  .enterprise-proof span { min-width: 50%; }
  .enterprise-grid { grid-template-columns: 1fr; }
  .enterprise-module { min-height: 235px; }
  .page-grid, .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .feature-row { grid-template-columns: 1fr; gap: 8px; }
  .grid-3, .leadership-grid { grid-template-columns: 1fr; }
  .process-line { grid-template-columns: 1fr 1fr; }
  .process-line > *:nth-child(2n) { border-right: 0; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-item { grid-template-columns: 42px 1fr; padding: 25px 20px; }
  .contact-form { grid-template-columns: 1fr; padding: 22px; }
  .research-soon h1 { font-size: clamp(3.1rem,16vw,5.5rem); }
  .cta-box { grid-template-columns: 1fr; gap: 20px; padding-block: 64px; }
  .cta-box .hero-actions { display: grid; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px; min-height: auto; }
  .footer-links { grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Extended enterprise footer */
.footer-brand { display: grid; justify-items: start; gap: 22px; }
.footer-brand > p { max-width: 310px; color: var(--text-3); font-size: .84rem; }
.footer-contact { display: inline-flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--gold-line); padding-bottom: 7px; color: var(--ivory); font-size: .78rem; font-weight: 740; }
.footer-contact span { color: var(--gold-soft); transition: transform 180ms var(--ease); }
.footer-contact:hover span { transform: translateX(5px); }
.footer-directory { min-width: 0; }
.footer-label { margin-bottom: 18px; color: var(--gold-soft); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-meta { position: relative; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-block: 20px 28px; color: rgba(174,189,202,.55); font-size: .64rem; text-transform: uppercase; }
@media (max-width: 760px) {
  .footer-brand { gap: 18px; }
  .footer-meta { align-items: flex-start; flex-direction: column; }
}


/* Inner-page authority network */
.hero-system {
  position: absolute;
  z-index: 1;
  top: 51%;
  right: max(3vw, calc((100vw - var(--container)) / 2));
  width: min(40vw, 540px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateY(-43%);
  filter: drop-shadow(0 28px 60px rgba(0,7,16,.35));
}
.hero-system::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(174,189,202,.16);
  background:
    linear-gradient(rgba(174,189,202,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,189,202,.04) 1px, transparent 1px),
    rgba(6,21,38,.18);
  background-size: 34px 34px;
  transform: rotate(45deg);
}
.hero-system::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 15%;
  right: 15%;
  top: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,199,126,.65), transparent);
  box-shadow: 0 0 18px rgba(228,199,126,.35);
  animation: system-scan 6s var(--ease) infinite;
}
.system-orbit,
.system-link,
.system-node,
.system-core { position: absolute; display: block; }
.system-orbit { border: 1px solid rgba(174,189,202,.2); border-radius: 50%; }
.orbit-outer { inset: 3%; border-style: dashed; animation: system-spin 50s linear infinite; }
.orbit-inner { inset: 24%; border-color: rgba(201,162,75,.3); animation: system-spin 30s linear infinite reverse; }
.system-link { z-index: 2; left: 50%; top: 50%; width: 35%; height: 1px; background: linear-gradient(90deg, rgba(228,199,126,.65), rgba(174,189,202,.08)); transform-origin: left; }
.link-a { transform: rotate(-90deg); }
.link-b { transform: rotate(145deg); }
.link-c { transform: rotate(35deg); }
.system-node {
  z-index: 3;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(174,189,202,.3);
  border-radius: 50%;
  background: rgba(13,35,54,.9);
  box-shadow: 0 0 0 8px rgba(174,189,202,.025);
}
.system-node i { position: absolute; inset: 22px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 15px rgba(228,199,126,.7); }
.node-a { left: calc(50% - 31px); top: 9%; }
.node-b { left: 8%; bottom: 17%; }
.node-c { right: 8%; bottom: 17%; }
.system-core {
  z-index: 5;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border: 1px solid var(--gold-line);
  background: rgba(6,21,38,.94);
  transform: translate(-50%,-50%) rotate(45deg);
  box-shadow: 0 0 0 12px rgba(201,162,75,.035), 0 0 42px rgba(201,162,75,.14);
}
.system-core i { position: absolute; inset: 17px; border: 1px solid rgba(228,199,126,.28); }
.system-core b { color: var(--gold-pale); font-size: 1.15rem; transform: rotate(-45deg); }
.product-detail .system-core { border-color: var(--product-accent,var(--gold-soft)); }
.product-detail .system-node i { background: var(--product-accent,var(--gold-soft)); }
@keyframes system-spin { to { transform: rotate(360deg); } }
@keyframes system-scan { 0%,100% { top: 20%; opacity: 0; } 12%,82% { opacity: .75; } 92% { top: 78%; opacity: 0; } }
@media (max-width: 1080px) {
  .hero-system { right: -3vw; width: 47vw; opacity: .82; }
}
@media (max-width: 760px) {
  .hero-system { top: 60%; right: -42%; width: 125vw; opacity: .22; transform: translateY(-42%); }
}


/* Cinematic ecosystem orbital motion */
#ecosystem::before {
  transform: translate3d(var(--grid-x, 0px), var(--grid-y, 0px), 0) scale(1.01);
  transition: opacity 900ms var(--ease), transform 650ms var(--ease);
}
#ecosystem.ecosystem-motion-ready::before { opacity: .18; }
#ecosystem.ecosystem-motion-entered::before { opacity: 1; }

.ecosystem-orbit.orbit-enhanced {
  --orbit-parallax-x: 0px;
  --orbit-parallax-y: 0px;
  --glow-x: 0px;
  --glow-y: 0px;
  isolation: isolate;
}
.orbit-enhanced .orbit-ring {
  opacity: 0;
  animation: none;
  transform: translate3d(var(--orbit-parallax-x), var(--orbit-parallax-y), 0) scale(.97);
  transition: opacity 900ms var(--ease), transform 1050ms var(--ease);
}
.orbit-enhanced.orbit-entered .orbit-ring {
  opacity: .72;
  transform: translate3d(var(--orbit-parallax-x), var(--orbit-parallax-y), 0) scale(1);
}
.orbit-enhanced .orbit-ring.second { opacity: 0; }
.orbit-enhanced.orbit-entered .orbit-ring.second { opacity: .9; }
.orbit-enhanced .orbit-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0 71%, rgba(174,189,202,.24) 78%, transparent 85%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: .32;
  animation: orbit-trace 38s linear infinite;
}
.orbit-enhanced .orbit-ring.second::before {
  background: conic-gradient(from 250deg, transparent 0 68%, rgba(228,199,126,.32) 76%, transparent 84%);
  opacity: .5;
  animation-duration: 31s;
  animation-direction: reverse;
}
.orbit-enhanced .orbit-ring::after {
  top: 49%;
  left: -4px;
  opacity: .48;
  animation: orbit-checkpoint 7s ease-in-out infinite;
}

.orbit-enhanced .orbit-center {
  opacity: 0;
  scale: .94;
  background: radial-gradient(circle at calc(45% + var(--glow-x)) calc(35% + var(--glow-y)), rgba(228,199,126,.15), rgba(13,35,54,.95) 64%);
  transition: opacity 700ms var(--ease) 480ms, scale 950ms var(--ease) 480ms, background-position 600ms var(--ease);
}
.orbit-enhanced.orbit-entered .orbit-center {
  opacity: 1;
  scale: 1;
}
.orbit-enhanced .orbit-center::before,
.orbit-enhanced .orbit-center::after {
  opacity: 0;
  animation: none;
  transform: scale(.97);
}
.orbit-enhanced.orbit-entered .orbit-center::before {
  opacity: .5;
  animation: mizan-aura 7s ease-in-out 800ms infinite;
}
.orbit-enhanced.orbit-entered .orbit-center::after {
  opacity: .3;
  animation: mizan-aura 7s ease-in-out 1.15s infinite reverse;
}

.orbit-enhanced .orbit-node,
.orbit-enhanced .orbit-node:nth-of-type(1),
.orbit-enhanced .orbit-node:nth-of-type(2),
.orbit-enhanced .orbit-node:nth-of-type(3),
.orbit-enhanced .orbit-node:nth-of-type(4) {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 160px;
  height: 160px;
  opacity: 0;
  scale: .93;
  transform: translate3d(
    calc(-50% + var(--orbit-x, 0px) + var(--orbit-parallax-x)),
    calc(-50% + var(--orbit-y, 0px) + var(--orbit-parallax-y)),
    0
  );
  transition:
    opacity 620ms var(--ease),
    scale 380ms var(--ease),
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
  will-change: transform;
}
.orbit-enhanced.orbit-entered .orbit-node { opacity: 1; scale: 1; }
.orbit-enhanced.orbit-entered .orbit-node[data-node="qudra"] { transition-delay: .88s, .88s, 0s, 0s, 0s; }
.orbit-enhanced.orbit-entered .orbit-node[data-node="mutamad"] { transition-delay: 1.04s, 1.04s, 0s, 0s, 0s; }
.orbit-enhanced.orbit-entered .orbit-node[data-node="isnad"] { transition-delay: 1.20s, 1.20s, 0s, 0s, 0s; }
.orbit-enhanced.orbit-entered .orbit-node[data-node="misbar"] { transition-delay: 1.36s, 1.36s, 0s, 0s, 0s; }
.orbit-enhanced .orbit-node:hover,
.orbit-enhanced .orbit-node.is-active {
  transform: translate3d(
    calc(-50% + var(--orbit-x, 0px) + var(--orbit-parallax-x)),
    calc(-50% + var(--orbit-y, 0px) + var(--orbit-parallax-y)),
    0
  );
}
.orbit-enhanced.orbit-entered .orbit-node.is-focused {
  z-index: 6;
  scale: 1.045;
  border-color: rgba(228,199,126,.62);
  background: rgba(28,58,83,.98);
  box-shadow: 0 0 0 7px rgba(201,162,75,.055), 0 24px 48px rgba(0,8,18,.38);
  transition-delay: 0s;
}
.orbit-enhanced .orbit-node span { transition: color 320ms ease; }
.orbit-enhanced .orbit-node.is-focused span { color: var(--text-2); }
.orbit-enhanced.has-focus .orbit-node:not(.is-focused) { opacity: .76; }
.orbit-enhanced .orbit-node[data-node="qudra"] {
  border-color: rgba(228,199,126,.78);
  box-shadow: 0 0 0 7px rgba(201,162,75,.035), 0 18px 42px rgba(0,8,18,.32);
}
.orbit-enhanced .orbit-node[data-node="qudra"]::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(228,199,126,.08);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-particle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(
    calc(-50% + var(--orbit-x, 0px) + var(--orbit-parallax-x)),
    calc(-50% + var(--orbit-y, 0px) + var(--orbit-parallax-y)),
    0
  );
  will-change: transform;
  transition: opacity 600ms ease 1.45s;
}
.orbit-entered .orbit-particle { opacity: .68; }
.particle-gold { background: var(--gold-soft); box-shadow: 0 0 10px rgba(228,199,126,.65); }
.particle-blue { width: 4px; height: 4px; background: var(--steel-300); box-shadow: 0 0 8px rgba(174,189,202,.48); }

@keyframes orbit-trace { to { rotate: 360deg; } }
@keyframes orbit-checkpoint { 0%,100% { opacity: .22; scale: .8; } 50% { opacity: .7; scale: 1.16; } }
@keyframes mizan-aura { 0%,100% { opacity: .24; transform: scale(.985); } 50% { opacity: .55; transform: scale(1.02); } }

@media (max-width: 1080px) {
  .orbit-enhanced .orbit-node,
  .orbit-enhanced .orbit-node:nth-of-type(1),
  .orbit-enhanced .orbit-node:nth-of-type(2),
  .orbit-enhanced .orbit-node:nth-of-type(3),
  .orbit-enhanced .orbit-node:nth-of-type(4) {
    width: 144px;
    height: 144px;
  }
}

@media (max-width: 760px) {
  .orbit-enhanced .orbit-node,
  .orbit-enhanced .orbit-node:nth-of-type(1),
  .orbit-enhanced .orbit-node:nth-of-type(2),
  .orbit-enhanced .orbit-node:nth-of-type(3),
  .orbit-enhanced .orbit-node:nth-of-type(4) {
    width: 116px;
    height: 116px;
    will-change: auto;
  }
  .orbit-enhanced .orbit-ring,
  .orbit-enhanced.orbit-entered .orbit-ring {
    transform: scale(1);
  }
  .orbit-enhanced .orbit-ring::before,
  .orbit-enhanced .orbit-ring.second::before,
  .orbit-enhanced .orbit-center::before,
  .orbit-enhanced .orbit-center::after {
    animation: none;
  }
  .orbit-particle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #ecosystem::before,
  .orbit-enhanced .orbit-ring,
  .orbit-enhanced .orbit-center,
  .orbit-enhanced .orbit-node {
    transition-duration: .01ms !important;
  }
  .orbit-enhanced .orbit-ring::before,
  .orbit-enhanced .orbit-ring::after,
  .orbit-enhanced .orbit-center::before,
  .orbit-enhanced .orbit-center::after {
    animation: none !important;
  }
  .orbit-particle { display: none; }
}


/* Keep rendered tracks synchronized with calculated orbital paths. */
.orbit-enhanced .orbit-ring {
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--outer-orbit-width);
  height: var(--outer-orbit-height);
  transform: translate3d(
    calc(-50% + var(--orbit-parallax-x)),
    calc(-50% + var(--orbit-parallax-y)),
    0
  ) scale(.97);
}
.orbit-enhanced .orbit-ring.second {
  inset: auto;
  width: var(--inner-orbit-width);
  height: var(--inner-orbit-height);
}
.orbit-enhanced.orbit-entered .orbit-ring,
.orbit-enhanced.orbit-entered .orbit-ring.second {
  transform: translate3d(
    calc(-50% + var(--orbit-parallax-x)),
    calc(-50% + var(--orbit-parallax-y)),
    0
  ) scale(1);
}
@media (max-width: 760px) {
  .orbit-enhanced .orbit-ring,
  .orbit-enhanced.orbit-entered .orbit-ring,
  .orbit-enhanced.orbit-entered .orbit-ring.second {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}