:root {
  --navy-950: #061326;
  --navy-900: #0b1f3a;
  --navy-850: #102844;
  --navy-800: #123152;
  --navy-700: #163a6b;
  --blue-600: #2f5da8;
  --blue-500: #4f7ec7;
  --blue-300: #8caddd;
  --blue-200: #c8d9f0;
  --blue-100: #e7eef8;
  --soft: #f5f7fa;
  --network-surface: #f8fafc;
  --network-surface-warm: #fcfdff;
  --network-art: url("/assets/living-network-light.svg");
  --white: #fff;
  --ink: #1e293b;
  --muted: #64748b;
  --border: #d8dee8;
  --success: #1fa971;
  --amber: #e6a23c;
  --container: 1220px;
  --header: 80px;
  --radius-button: 12px;
  --radius-card: 24px;
  --shadow-sm: 0 4px 12px rgba(11, 31, 58, 0.1);
  --shadow-md: 0 18px 48px rgba(11, 31, 58, 0.14);
  --shadow-lg: 0 32px 90px rgba(7, 22, 43, 0.22);
  --ease: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Cairo", Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.ilm-landing-page {
  position: relative;
  overflow-x: hidden;
  background-color: var(--network-surface);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(79, 126, 199, 0.14), transparent 24%),
    radial-gradient(circle at 92% 42%, rgba(140, 173, 221, 0.18), transparent 26%),
    var(--network-art);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top left, center right, center top;
  background-size: auto, auto, 1600px 1000px;
}


html[dir="ltr"] body {
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
}

body.menu-open {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

:focus-visible {
  outline: 3px solid #80b3ff;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--white);
  color: var(--navy-900);
  transform: translateY(-160%);
  transition: transform var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.page-progress {
  position: fixed;
  z-index: 999;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  pointer-events: none;
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-300), var(--white));
  box-shadow: 0 0 16px rgba(140, 173, 221, 0.8);
  transform: scaleX(0);
  transform-origin: left;
}

html[dir="rtl"] .page-progress span {
  transform-origin: right;
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  inset-block-start: 0;
  inset-inline: 0;
  color: var(--white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.09);
  transition: background var(--ease), box-shadow var(--ease);
}

.site-header.scrolled {
  /* Blurring the whole viewport behind a fixed header re-rasterised the page
     on every scroll frame; an opaque bar reads the same and costs nothing. */
  background: rgba(7, 22, 43, 0.97);
  box-shadow: 0 10px 34px rgba(2, 11, 23, 0.22);
}

/* Wider than the page container so the mark and the language switch sit
   closer to the edges and the row breathes. */
.header-inner {
  width: min(calc(100% - 40px), 1460px);
  min-height: var(--header);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.logo-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: #eff1f4;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-inline: auto 0;
}

.desktop-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--ease);
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -11px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-300);
  transform: scaleX(0);
  transition: transform var(--ease);
}

.desktop-nav a:hover {
  color: var(--white);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.language-switch {
  min-width: 56px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--white);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}

.language-switch:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

.lang-current {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}

.button svg,
.panel-action svg,
.community-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--ease);
}

html[dir="rtl"] .button svg,
html[dir="rtl"] .panel-action svg,
html[dir="rtl"] .community-arrow {
  transform: scaleX(-1);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button:hover svg,
.panel-action:hover svg {
  transform: translateX(4px);
}

html[dir="rtl"] .button:hover svg,
html[dir="rtl"] .panel-action:hover svg {
  transform: scaleX(-1) translateX(4px);
}

.primary {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(47, 93, 168, 0.3);
}

.primary:hover {
  background: #386bb8;
}

.menu-button,
.mobile-nav {
  display: none;
}

/* Hero */

.hero {
  position: relative;
  min-height: 800px;
  min-height: min(800px, 100svh);
  overflow: hidden;
  padding-block: calc(var(--header) + clamp(40px, 7vh, 76px)) 28px;
  background:
    radial-gradient(circle at 15% 20%, rgba(47, 93, 168, 0.27), transparent 29%),
    linear-gradient(122deg, var(--navy-900), var(--navy-950));
  color: var(--white);
  isolation: isolate;
}

.hero-gridlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent);
}

.hero-aurora {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  animation: aurora-drift 12s ease-in-out infinite alternate;
}

.aurora-one {
  width: 540px;
  height: 540px;
  inset-block-start: -310px;
  inset-inline-start: -180px;
  background: radial-gradient(circle, rgba(91, 122, 168, 0.35), transparent 68%);
}

.aurora-two {
  width: 500px;
  height: 500px;
  inset-block-end: -350px;
  inset-inline-end: 8%;
  background: radial-gradient(circle, rgba(47, 93, 168, 0.3), transparent 68%);
  animation-delay: -5s;
}

@keyframes aurora-drift {
  to {
    transform: translate3d(60px, 34px, 0) scale(1.12);
  }
}

/* Wider than the page container and a bigger gutter, which carries the scene
   further out toward the edge without any negative margins to overflow. */
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline-start: -20px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 18px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 700;
}

.eyebrow.light {
  color: var(--blue-200);
}

.live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: live-pulse 2.2s ease-out infinite;
}

@keyframes live-pulse {
  0% { opacity: 0.7; transform: scale(0.5); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}

.hero h1 {
  align-self: stretch;
  margin: 0;
  margin-inline-start: 0;
  width: 100%;
  max-width: 100%;
  font-size: clamp(44px, 4.6vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  white-space: normal;
  text-align: center;
}

html[dir="rtl"] .hero h1 {
  letter-spacing: 0;
}

.hero .hero-title-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 22px);
  max-width: 100%;
}


.hero h1 .hero-word-main {
  display: inline-block;
  white-space: nowrap;
  color: var(--white);
}

.hero h1 .hero-word-tail {
  display: inline-block;
  white-space: nowrap;
  font-style: normal;
  background: linear-gradient(135deg, #70a6ff 0%, #bfd5f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(112, 166, 255, 0.4));
}

.hero-title-rule-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.hero-title-rule {
  width: clamp(44px, 5vw, 84px);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(112,166,255,0.4), #ffffff, #70a6ff, #bfd5f6, #ffffff, rgba(112,166,255,0.4));
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(112, 166, 255, 0.7), 0 0 30px rgba(191, 213, 246, 0.4);
  animation: fiber-shimmer 2.2s linear infinite;
}

@keyframes fiber-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.hero-copy > p {
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 18px;
  text-align: center;
}

/* The action now follows the headline directly, and the figures close the
   block instead of interrupting the path from promise to click. */
.hero-bottom-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-block-start: 54px;
  margin-inline: auto;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 0;
  margin-inline-start: 0;
}

.hero-stats > div {
  min-width: 120px;
  display: grid;
  gap: 5px;
  padding-inline: 26px;
  text-align: center;
}

.hero-stats > div + div {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-stats strong {
  font-family: "Inter", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.hero-stats span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-block-start: 48px;
  margin-inline-start: 0;
}

.hero-cta {
  min-height: 60px;
  padding: 18px 44px;
  font-size: 16.5px;
  border-radius: 20px;
  white-space: nowrap;
}

.hero-cta svg {
  width: 22px;
  height: 22px;
}

/* Hero network scene */

.knowledge-scene {
  position: relative;
  width: 100%;
  max-width: 537px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  /* Sits against the outer edge of its column rather than centred in it,
     which carries the scene away from the copy without resizing it. */
  margin-inline: auto 0;
  margin-block-start: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.25);
  transform:
    perspective(1100px)
    rotateX(calc(var(--scene-y, 0) * -1deg))
    rotateY(calc(var(--scene-x, 0) * 1deg));
  transform-style: preserve-3d;
  transition: transform 140ms ease-out;
}

.knowledge-scene.is-visible {
  transform:
    perspective(1100px)
    rotateX(calc(var(--scene-y, 0) * -1deg))
    rotateY(calc(var(--scene-x, 0) * 1deg));
}

.scene-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(191, 213, 246, 0.38) 1px, transparent 1px);
  background-size: 25px 25px;
  opacity: 0.16;
  mask-image: radial-gradient(circle at center, #000, transparent 70%);
}

/* The object: a fixed 600px coordinate space so the rings, the spokes and the
   core are all in the same units. One factor scales the whole thing, which is
   why the spokes can no longer drift away from the rings at any scene width. */
.scene-stage {
  position: absolute;
  inset-block-start: 50%;
  /* physical `left`, not `inset-inline-start`: the page is RTL and the
     centring translate() is physical too. */
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 0.895));
  transform-origin: center;
  transform-style: preserve-3d;
}

.orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(191, 213, 246, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  inset-block-start: 50%;
  inset-inline-start: -3px;
  border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 14px rgba(140, 173, 221, 0.9);
}

/* Ring radii clear the 90px core (plus its halo) so no token ever sits on top
   of the logo disc, and the outer ring keeps its tokens inside the 600px stage. */
.orbit-a {
  --ring-radius: 140px;
  --ring-duration: 18s;
  --ring-counter: reverse;
  width: 280px;
  height: 280px;
  animation: orbit-spin var(--ring-duration) linear infinite;
}

.orbit-b {
  --ring-radius: 200px;
  --ring-duration: 28s;
  --ring-counter: normal;
  width: 400px;
  height: 400px;
  animation: orbit-spin var(--ring-duration) linear infinite reverse;
}

.orbit-c {
  --ring-radius: 262px;
  --ring-duration: 40s;
  --ring-counter: reverse;
  width: 524px;
  height: 524px;
  animation: orbit-spin var(--ring-duration) linear infinite;
}

/* ── Small bodies on the rings ────────────────────────────────────────────
   Each token rides its ring for free, then counter-spins on that ring's own
   clock so the glyph inside never tilts. Purely decorative.
   ────────────────────────────────────────────────────────────────────────── */

.orbit-token {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: grid;
  place-content: center;
  transform: rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1));
}

.tok-1 { --angle: 0deg; }
.tok-2 { --angle: 120deg; }
.tok-a3 { --angle: 240deg; }

.tok-edu { --angle: 45deg; }
.tok-3 { --angle: 135deg; }
.tok-res { --angle: 225deg; }
.tok-4 { --angle: 315deg; }

.tok-5 { --angle: 20deg; }
.tok-6 { --angle: 110deg; }
.tok-7 { --angle: 200deg; }
.tok-8 { --angle: 290deg; }

.orbit-token-face.primary-node {
  border-color: rgba(191, 213, 246, 0.45);
  box-shadow: 0 0 12px rgba(140, 173, 221, 0.4);
}

/* Both ends are declared so the angle offset is never guessed from the
   underlying value: the offset holds, the full turn cancels the ring. */
.orbit-token-spin {
  display: block;
  animation: orbit-token-upright var(--ring-duration) linear infinite var(--ring-counter);
}

@keyframes orbit-token-upright {
  from { transform: rotate(calc(var(--angle) * -1)); }
  to { transform: rotate(calc((var(--angle) * -1) + 360deg)); }
}

.orbit-token-face {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(16, 43, 77, 0.9);
  color: var(--blue-200);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}

.orbit-token-face svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
}

@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.network-lines {
  position: absolute;
  inset-block-start: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  color: var(--blue-300);
}

.network-lines path {
  stroke: url(#lineGlow);
  stroke-width: 0.8;
  stroke-dasharray: 4 6;
  opacity: 0.65;
  animation: line-run 12s linear infinite;
}

.network-signal {
  color: var(--blue-200);
  filter: drop-shadow(0 0 5px currentColor);
}

.network-signal-halo {
  fill: rgba(140, 173, 221, 0.15);
  stroke: rgba(191, 213, 246, 0.3);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 1.6s ease-in-out infinite;
}

.network-signal-core {
  fill: currentColor;
  stroke: none;
}

@keyframes line-run {
  to { stroke-dashoffset: -210; }
}

@keyframes node-pulse {
  50% {
    opacity: 0.42;
    transform: scale(0.72);
  }
}

.core-pulse {
  position: absolute;
  z-index: 2;
  width: 192px;
  height: 192px;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(140, 173, 221, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: core-wave 3s ease-out infinite;
}

@keyframes core-wave {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

.hub-core {
  position: absolute;
  z-index: 4;
  width: 180px;
  height: 180px;
  inset: 50% auto auto 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 8px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: #eaeaec;
  background-clip: padding-box;
  color: var(--navy-900);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%) translateZ(40px);
  cursor: pointer;
  animation: hub-float 5s ease-in-out infinite;
}

#about,
#inquiries,
.platform-panel {
  scroll-margin-top: calc(var(--header) + 24px);
}

@keyframes hub-float {
  50% { transform: translate(-50%, calc(-50% - 7px)) translateZ(40px); }
}

.hub-core img {
  width: 92px;
  height: 75px;
  object-fit: contain;
}

.hub-core b {
  margin-block-start: 5px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.satellite {
  position: absolute;
  z-index: 5;
  min-width: 178px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  padding: 12px;
  /* A capsule, not a card: the scene is all circles, and these orbit. */
  padding-inline-end: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(16, 43, 77, 0.87);
  color: var(--white);
  text-align: start;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transform: translateZ(28px);
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}

html[dir="ltr"] .satellite {
  direction: ltr;
}

html[dir="rtl"] .satellite {
  direction: rtl;
}

.satellite:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(22, 58, 107, 0.96);
  transform: translateZ(40px) translateY(-5px);
}

.satellite-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--blue-200);
}

.satellite-icon svg {
  width: 22px;
  height: 22px;
}

.satellite > span:nth-child(2) {
  display: grid;
}

.satellite b {
  font-size: 12px;
}

.satellite small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.satellite-education {
  animation: satellite-float 5.4s ease-in-out infinite;
}

.satellite-research {
  animation: satellite-float 6s ease-in-out -2s infinite;
}

@keyframes satellite-float {
  50% { transform: translateZ(28px) translateY(-8px); }
}

@keyframes satellite-float-mobile {
  50% { transform: translateY(-6px); }
}

@keyframes hub-float-mobile {
  50% { transform: translate(-50%, -7px); }
}


/* ── Orbiting constellation ───────────────────────────────────────────────
   Each chip rides its own ring at its own speed, so the two drift apart,
   cross, and come back around. Each connector link in the SVG turns on the
   same clock as its chip, which is what keeps the dashes attached.

   Each level owns exactly one transform: the slot places the chip on the
   circle, .satellite-unturn cancels the slot's static angle, .satellite-spin
   cancels the live rotation, and .satellite keeps its float and hover.
   ────────────────────────────────────────────────────────────────────────── */

.satellite-ring {
  --orbit-radius: 225px;
  position: absolute;
  z-index: 5;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: constellation-spin var(--orbit-duration) linear infinite;
}

/* Same clock for both, so the pair stays a rigid diameter. */
.ring-a,
.ring-b { --orbit-duration: 52s; }

@keyframes constellation-spin {
  to { transform: rotate(360deg); }
}

/* A zero-size box centring its content, so the chip's centre lands on the
   circle rather than its top corner. */
.satellite-slot {
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  display: grid;
  place-content: center;
  transform-style: preserve-3d;
  transform: rotate(var(--angle)) translateY(calc(var(--orbit-radius) * -1));
}

/* Inside the ring the chip flows within its wrappers instead of positioning
   itself against the scene. */
.satellite-ring .satellite {
  position: relative;
}

/* Opposite ends of a diameter: 12 o'clock and 6 o'clock. They hold this
   relationship for good, since both rings run on the same clock. */
.slot-a { --angle: 0deg; }
.slot-b { --angle: 180deg; }

.satellite-unturn,
.satellite-spin {
  display: block;
  transform-style: preserve-3d;
}

.satellite-unturn {
  transform: rotate(calc(var(--angle) * -1));
}

/* Same duration as its own ring, reversed, so the label never tilts. */
.satellite-spin {
  animation: constellation-spin var(--orbit-duration) linear infinite reverse;
}

/* Each link rotates about the core point in viewBox units. The origin must be
   the exact centre the spokes start from (300,300); any offset makes the
   dashed lines drift away from the core as they turn. */
.network-link {
  transform-box: view-box;
  transform-origin: 300px 300px;
}

.link-oa {
  --orbit-duration: 18s;
  animation: constellation-spin var(--orbit-duration) linear infinite;
}

.link-ob {
  --orbit-duration: 28s;
  animation: constellation-spin var(--orbit-duration) linear infinite reverse;
}

.link-oc {
  --orbit-duration: 40s;
  animation: constellation-spin var(--orbit-duration) linear infinite;
}

/* The orbit never pauses and never restarts. Hover only lifts the chip
   (see .satellite:hover), which leaves the rotation untouched. */

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-200);
  opacity: 0.48;
  box-shadow: 0 0 8px currentColor;
  animation: particle-drift 8s ease-in-out infinite alternate;
}

.p1 { inset: 16% 48%; }
.p2 { inset: 28% 72%; animation-delay: -1s; }
.p3 { inset: 72% 18%; animation-delay: -3s; }
.p4 { inset: 62% 82%; animation-delay: -5s; }
.p5 { inset: 85% 60%; animation-delay: -2s; }
.p6 { inset: 42% 12%; animation-delay: -6s; }

@keyframes particle-drift {
  to { transform: translate(20px, -28px) scale(1.8); opacity: 0.1; }
}

/* Shared section */

.section {
  padding-block: 112px;
}

.section-heading {
  margin-block-end: 52px;
}

.section-heading.centered {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.section-heading.centered .eyebrow {
  justify-content: center;
}

.section-heading h2,
.finale-card h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .finale-card h2 {
  letter-spacing: 0;
}

.section-heading > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* About ILM HUB */

.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(79, 126, 199, 0.12), transparent 27%),
    radial-gradient(circle at 92% 78%, rgba(140, 173, 221, 0.16), transparent 28%);
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  color: var(--ink);
}

.about-gridlines {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0.24;
  background:
    repeating-radial-gradient(circle at 88% 28%, transparent 0 46px, rgba(79, 126, 199, 0.19) 47px 48px, transparent 49px 82px);
  mask-image: linear-gradient(90deg, transparent 48%, #000 76%, transparent);
}

.about-glow {
  position: absolute;
  z-index: -2;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.34;
  pointer-events: none;
}

.about-glow-one {
  inset-block-start: -230px;
  inset-inline-start: -180px;
  background: radial-gradient(circle, rgba(92, 143, 218, 0.28), transparent 68%);
}

.about-glow-two {
  inset-block-end: -260px;
  inset-inline-end: -150px;
  background: radial-gradient(circle, rgba(56, 104, 178, 0.24), transparent 68%);
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(620px, 1.22fr);
  gap: 68px;
  align-items: center;
}

.about-copy {
  position: relative;
  z-index: 2;
}

.about-copy h2 {
  display: grid;
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(40px, 4.5vw, 62px);
  line-height: 1.22;
  letter-spacing: -0.045em;
}

html[dir="rtl"] .about-copy h2 {
  letter-spacing: 0;
}

.about-copy h2 em {
  color: var(--blue-600);
  font-style: normal;
}

.about-copy > p {
  max-width: 590px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}

.about-vision {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 18px;
  margin-block-start: 34px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px rgba(11, 31, 58, 0.08), inset 0 1px var(--white);
  backdrop-filter: blur(12px);
}

.about-vision-line {
  border-radius: 6px;
  background: linear-gradient(to bottom, var(--blue-300), rgba(140, 173, 221, 0.12));
}

.about-vision small {
  color: var(--blue-300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.about-vision p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.8;
}

.about-experience {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.about-tabs {
  display: grid;
  align-content: center;
  gap: 10px;
}

.about-tab {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  width: 100%;
  padding: 18px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  box-shadow: 0 10px 28px rgba(11, 31, 58, 0.06);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.about-tab::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  inset-block-start: -62px;
  inset-inline-end: -55px;
  border-radius: 50%;
  background: rgba(140, 173, 221, 0.18);
  opacity: 0;
  transition: opacity var(--ease), transform var(--ease);
}

.about-tab:hover {
  border-color: rgba(47, 93, 168, 0.34);
  color: var(--navy-900);
  transform: translateY(-2px);
}

.about-tab.active {
  border-color: var(--navy-800);
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  color: var(--white);
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.2), inset 3px 0 var(--blue-300);
}

html[dir="rtl"] .about-tab.active {
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.2), inset -3px 0 var(--blue-300);
}

.about-tab.active::after {
  opacity: 1;
  transform: scale(1.25);
}

.about-tab > span:last-child {
  display: grid;
  gap: 4px;
}

.about-tab b {
  font-size: 12px;
  line-height: 1.45;
}

.about-tab small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.about-tab.active small {
  color: rgba(255, 255, 255, 0.5);
}

.about-stage {
  --about-rotate-x: 0deg;
  --about-rotate-y: 0deg;
  --mode-accent: 140, 173, 221;
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--mode-accent), 0.2), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.08);
  transform: perspective(1200px) rotateX(var(--about-rotate-x)) rotateY(var(--about-rotate-y));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, background 500ms ease;
}

.about-stage[data-mode="community"] {
  --mode-accent: 102, 195, 169;
}

.about-stage[data-mode="ecosystem"] {
  --mode-accent: 119, 157, 221;
}

.about-stage-grid {
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle, #000, transparent 74%);
}

.about-stage::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  background: rgba(var(--mode-accent), 0.12);
  filter: blur(50px);
  translate: -50% -50%;
  transition: background 500ms ease;
}

.about-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px dashed rgba(140, 173, 221, 0.2);
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

.orbit-wide {
  width: 390px;
  height: 390px;
  animation: about-orbit-spin 30s linear infinite;
}

.orbit-tight {
  width: 270px;
  height: 270px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.07);
  animation: about-orbit-spin 22s linear infinite reverse;
}

@keyframes about-orbit-spin {
  to { rotate: 360deg; }
}

.about-state {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 480ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-state.active {
  opacity: 1;
  transform: scale(1);
}

.about-core {
  position: absolute;
  z-index: 4;
  width: 178px;
  height: 178px;
  inset: 50% auto auto 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055)),
    rgba(7, 22, 43, 0.72);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 14px rgba(var(--mode-accent), 0.055),
    0 0 0 28px rgba(var(--mode-accent), 0.025);
  translate: -50% -50%;
  backdrop-filter: blur(16px);
}

.about-core::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(var(--mode-accent), 0.25);
  border-radius: 50%;
  animation: about-core-pulse 3.8s ease-out infinite;
}

@keyframes about-core-pulse {
  70%,
  100% {
    inset: -34px;
    opacity: 0;
  }
}

.about-core-logo {
  width: 62px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.about-core-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-core small {
  margin-block-start: 5px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 8px;
}

.about-core strong {
  margin-block-start: 2px;
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.about-node {
  position: absolute;
  z-index: 5;
  min-width: 108px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(7, 22, 43, 0.82);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(12px);
  backdrop-filter: blur(12px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--ease),
    color var(--ease);
}

.about-state.active .about-node {
  opacity: 1;
  transform: translateY(0);
}

.about-state.active .about-node:nth-of-type(2) { transition-delay: 80ms; }
.about-state.active .about-node:nth-of-type(3) { transition-delay: 150ms; }
.about-state.active .about-node:nth-of-type(4) { transition-delay: 220ms; }
.about-state.active .about-node:nth-of-type(5) { transition-delay: 290ms; }
.about-state.active .about-node:nth-of-type(6) { transition-delay: 360ms; }
.about-state.active .about-node:nth-of-type(7) { transition-delay: 430ms; }

.about-node i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgb(var(--mode-accent));
  box-shadow: 0 0 12px rgba(var(--mode-accent), 0.9);
  animation: about-node-pulse 2.4s ease-in-out infinite;
}

@keyframes about-node-pulse {
  50% { opacity: 0.4; transform: scale(0.7); }
}

.about-node b {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.about-node.node-a { inset-block-start: 15%; left: 6%; }
.about-node.node-b { inset-block-start: 15%; right: 6%; }
.about-node.node-c { inset-block-end: 12%; left: 50%; translate: -50% 0; }
.about-node.node-d { inset-block-start: 46%; left: 2%; }
.about-node.node-e { inset-block-start: 46%; right: 2%; }
.about-node.node-f { inset-block-start: 5%; left: 50%; translate: -50% 0; }

.platform-node {
  min-width: 132px;
  padding-block: 13px;
  border-color: rgba(140, 173, 221, 0.26);
  background: linear-gradient(145deg, rgba(47, 93, 168, 0.28), rgba(7, 22, 43, 0.88));
  color: var(--white);
}

/* Simple interactive About layout */

@media (max-width: 0px) {
.about {
  background:
    radial-gradient(circle at 8% 10%, rgba(79, 126, 199, 0.08), transparent 25%),
    var(--white);
}

.about-gridlines,
.about-glow,
.about-stage-grid,
.about-orbit {
  display: none;
}

.about-layout {
  display: block;
}

.about-copy {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0 72px;
  align-items: start;
  padding-block-end: 54px;
  border-block-end: 1px solid var(--border);
}

.about-copy h2 {
  grid-column: 1;
  font-size: clamp(36px, 4vw, 52px);
}

.about-copy > p {
  grid-column: 2;
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
}

.about-vision {
  grid-column: 2;
  margin-block-start: 22px;
  padding: 17px 20px;
  background: var(--soft);
  box-shadow: none;
}

.about-experience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-block-start: 44px;
}

.about-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.about-tab {
  min-height: 104px;
  padding: 19px 20px;
  border-color: var(--border);
  border-radius: 18px;
  background: var(--white);
  color: var(--navy-900);
  box-shadow: none;
}

.about-tab:hover {
  border-color: rgba(47, 93, 168, 0.36);
  box-shadow: 0 12px 30px rgba(11, 31, 58, 0.08);
}

.about-tab.active,
html[dir="rtl"] .about-tab.active {
  border-color: rgba(47, 93, 168, 0.42);
  background: linear-gradient(145deg, rgba(231, 238, 248, 0.76), var(--white));
  color: var(--navy-900);
  box-shadow: 0 14px 34px rgba(11, 31, 58, 0.09), inset 0 3px var(--blue-600);
}

.about-tab.active small {
  color: var(--muted);
}

.about-tab::after {
  background: rgba(79, 126, 199, 0.08);
}

.about-tab b {
  font-size: 13px;
}

.about-tab small {
  font-size: 10px;
}

.about-stage {
  --about-pointer-x: 50%;
  --about-pointer-y: 50%;
  min-height: 286px;
  border-color: var(--border);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(231, 238, 248, 0.62), rgba(245, 247, 250, 0.94)),
    var(--soft);
  box-shadow: inset 0 1px var(--white);
  transform: none;
}

.about-stage::before {
  width: auto;
  height: auto;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--about-pointer-x) var(--about-pointer-y),
    rgba(79, 126, 199, 0.15),
    transparent 28%
  );
  filter: none;
  translate: none;
  opacity: 1;
  transition: background 180ms ease;
}

.about-state {
  display: grid;
  grid-template-columns: 220px repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 34px;
  transform: translateY(10px);
}

.about-state.active {
  transform: translateY(0);
}

.about-core,
.compact-core {
  position: relative;
  width: auto;
  height: auto;
  inset: auto;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-inline-end: 28px;
  border: 0;
  border-inline-end: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  translate: none;
  backdrop-filter: none;
}

.about-core::after {
  display: none;
}

.about-core-logo {
  width: 58px;
  height: 54px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.08);
}

.about-core small {
  margin-block-start: 14px;
  color: var(--muted);
  font-size: 10px;
}

.about-core strong {
  color: var(--navy-900);
  font-size: 17px;
}

.about-node,
.about-node.node-a,
.about-node.node-b,
.about-node.node-c,
.about-node.node-d,
.about-node.node-e,
.about-node.node-f,
.platform-node {
  position: relative;
  min-width: 0;
  inset: auto;
  left: auto;
  right: auto;
  display: flex;
  justify-content: flex-start;
  padding: 15px 16px;
  border-color: var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--navy-900);
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.055);
  translate: none;
  backdrop-filter: none;
}

.about-node::after {
  content: "";
  position: absolute;
  height: 2px;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
}

.about-state.active .about-node::after {
  animation: about-path-reveal 1.8s 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes about-path-reveal {
  to { width: 100%; }
}

.about-node i {
  background: var(--blue-500);
  box-shadow: 0 0 0 5px rgba(79, 126, 199, 0.1);
}

.about-node b {
  overflow: hidden;
  color: var(--navy-900);
  font-size: 10px;
  text-overflow: ellipsis;
}
}

/* Active About map */

.about-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--mode-accent), 0.18), transparent 36%),
    linear-gradient(145deg, rgba(231, 238, 248, 0.9), var(--white));
  box-shadow:
    0 26px 70px rgba(11, 31, 58, 0.13),
    inset 0 1px var(--white);
}

.about-stage-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(47, 93, 168, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 93, 168, 0.13) 1px, transparent 1px);
}

.about-orbit {
  border-color: rgba(47, 93, 168, 0.28);
}

.orbit-tight {
  border-color: rgba(47, 93, 168, 0.14);
}

.about-core {
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(145deg, var(--blue-500), var(--blue-600));
  box-shadow:
    0 25px 60px rgba(47, 93, 168, 0.28),
    0 0 0 14px rgba(79, 126, 199, 0.09),
    0 0 0 28px rgba(79, 126, 199, 0.045);
}

.about-core-logo {
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.about-core small {
  color: rgba(255, 255, 255, 0.72);
}

.about-core strong {
  color: var(--white);
}

.about-node,
.platform-node {
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(145deg, var(--blue-500), var(--blue-600));
  color: var(--white);
  box-shadow: 0 14px 34px rgba(47, 93, 168, 0.24);
}

.about-node i {
  background: var(--blue-100);
  box-shadow: 0 0 12px rgba(231, 238, 248, 0.95);
}

.about-node b {
  color: var(--white);
}

/* Platform scenes */

.platforms {
  position: relative;
  isolation: isolate;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(47, 93, 168, 0.11), transparent 24%);
  background-repeat: no-repeat;
  background-position: top right;
}

.platform-showcase {
  display: grid;
  gap: 48px;
}

.platform-panel {
  position: relative;
  min-height: 540px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 3px 0 rgba(11, 31, 58, 0.02);
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}

.platform-panel:hover {
  border-color: #becce0;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.platform-panel:nth-child(even) {
  grid-template-columns: 0.8fr 1.2fr;
}

.platform-panel:nth-child(even) .panel-copy {
  order: 2;
}

.panel-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 56px 52px;
}

.panel-copy h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.35;
  text-align: center;
}

.panel-copy > p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.platform-stats {
  width: 100%;
  display: grid;
  gap: 16px;
  margin-block-start: 36px;
}

.education-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.research-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-stat {
  min-height: 100px;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 16px 14px;
  border: 1px solid rgba(91, 122, 168, 0.45);
  border-radius: 16px;
  background: var(--navy-800);
  color: var(--white);
  text-align: center;
  box-shadow: 0 12px 25px rgba(11, 31, 58, 0.13);
}

.platform-stat strong {
  display: flex;
  justify-content: center;
  direction: ltr;
  font-family: "Inter", Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.platform-stat small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.35;
}

.panel-action {
  width: fit-content;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-start: 62px;
  margin-inline: auto;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(47, 93, 168, 0.24);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}

.panel-action:hover {
  background: #386bb8;
  box-shadow: 0 14px 30px rgba(47, 93, 168, 0.32);
  transform: translateY(-2px);
}

.panel-action svg {
  width: 16px;
  height: 16px;
}

.education-visual,
.research-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
}

.education-visual {
  background:
    linear-gradient(145deg, rgba(47, 93, 168, 0.45), transparent 55%),
    var(--navy-900);
}

.education-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.13;
  background-image: radial-gradient(circle, #c8d9f0 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}

.course-card {
  position: absolute;
  width: 320px;
  height: 210px;
  inset: 50% auto auto 50%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
}

.course-card-back {
  opacity: 0.28;
  transform: translate(-60%, -36%) rotate(-11deg);
}

.course-card-mid {
  opacity: 0.48;
  transform: translate(-45%, -55%) rotate(8deg);
}

.course-card-front {
  color: var(--white);
  transform: translate(-50%, -50%);
  animation: course-float 5s ease-in-out infinite;
}

@keyframes course-float {
  50% { transform: translate(-50%, calc(-50% - 9px)) rotate(1deg); }
}

.course-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mini-cap {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  color: var(--blue-600);
  animation: academic-badge-motion 4.2s ease-in-out infinite;
}

.mini-cap::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 70px;
  inset: 50% auto auto -28px;
  background: linear-gradient(90deg, transparent, rgba(122, 166, 231, 0.42), transparent);
  transform: translateY(-50%) rotate(24deg);
  animation: academic-badge-shine 4.2s ease-in-out infinite;
}

.mini-cap svg {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  animation: academic-icon-pulse 4.2s ease-in-out infinite;
}

@keyframes academic-badge-motion {
  0%,
  52%,
  100% {
    transform: translateY(0) rotate(0);
    box-shadow: 0 0 0 rgba(111, 161, 231, 0);
  }
  64% {
    transform: translateY(-5px) rotate(-5deg);
    box-shadow: 0 10px 24px rgba(111, 161, 231, 0.28);
  }
  74% {
    transform: translateY(-2px) rotate(3deg);
    box-shadow: 0 6px 18px rgba(111, 161, 231, 0.2);
  }
  84% {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow: 0 8px 20px rgba(111, 161, 231, 0.24);
  }
}

@keyframes academic-icon-pulse {
  0%,
  52%,
  100% {
    transform: scale(1);
  }
  64% {
    transform: scale(1.16);
  }
  74% {
    transform: scale(0.94);
  }
  84% {
    transform: scale(1.08);
  }
}

@keyframes academic-badge-shine {
  0%,
  48% {
    left: -28px;
  }
  76%,
  100% {
    left: 54px;
  }
}

.course-top b {
  font-family: inherit;
  font-size: 12px;
}

.course-title {
  display: grid;
  gap: 8px;
  margin-block: 30px 24px;
}

.course-title i {
  width: 80%;
  height: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
}

.course-title i:last-child {
  width: 55%;
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
}

.progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue-300);
  transform: scaleX(0);
  transform-origin: right;
}

html[dir="ltr"] .progress-track span {
  transform-origin: left;
}

.course-card-front > small {
  display: block;
  margin-block-start: 8px;
  color: var(--blue-200);
  font-family: "Inter", sans-serif;
  font-size: 10px;
}

@keyframes chip-float {
  50% { transform: translateY(-8px); }
}

.visual-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  inset-block-end: -170px;
  inset-inline-start: 50%;
  border-radius: 50%;
  background: rgba(79, 126, 199, 0.35);
  filter: blur(45px);
  transform: translateX(-50%);
}

.research-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(30, 60, 110, 0.45), transparent 70%), var(--navy-950);
  isolation: isolate;
}

.research-visual-bg {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle, #70a6ff 1px, transparent 1px);
  background-size: 24px 24px;
}

.svg-node-bg {
  fill: #07162b;
}

.svg-node-border {
  fill: none;
  stroke: rgba(140, 185, 255, 0.7);
  stroke-width: 2px;
  filter: drop-shadow(0 0 10px rgba(112, 166, 255, 0.5));
}

.svg-center-glow {
  fill: rgba(112, 166, 255, 0.28);
  filter: blur(10px);
  animation: center-glow-pulse 3s ease-in-out infinite alternate;
}

.svg-center-bg {
  fill: url(#centerGradient);
}

.svg-center-border {
  fill: none;
  stroke: #70a6ff;
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 16px rgba(112, 166, 255, 0.8));
}

@keyframes center-glow-pulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.research-radar-ring {
  fill: none;
  stroke: rgba(112, 166, 255, 0.25);
  stroke-width: 1px;
  transform-origin: 220px 170px;
}

.research-radar-ring.r1 {
  animation: radar-svg-expand 4s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

.research-radar-ring.r2 {
  animation: radar-svg-expand 4s 2s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

@keyframes radar-svg-expand {
  0% { transform: scale(0.15); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.research-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.research-link-path {
  fill: none;
  stroke: rgba(112, 166, 255, 0.45);
  stroke-width: 1.5px;
  stroke-dasharray: 6 8;
  animation: line-run 14s linear infinite;
}

.research-link-path.faint {
  stroke: rgba(140, 173, 221, 0.22);
  stroke-dasharray: 4 6;
}

.research-signal-pulse circle.signal-core {
  filter: drop-shadow(0 0 8px #ffffff);
}

.research-node-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  z-index: 5;
  transition: transform 0.3s ease;
}

.research-node-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(140, 185, 255, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(20, 50, 95, 0.95), rgba(7, 22, 43, 0.95));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 24px rgba(112, 166, 255, 0.4);
  backdrop-filter: blur(10px);
}

.research-node-icon svg {
  width: 23px;
  height: 23px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(191, 213, 246, 0.6));
}

.center-hub .research-node-icon {
  width: 68px;
  height: 68px;
  border: 2px solid #70a6ff;
  background: linear-gradient(135deg, rgba(35, 85, 165, 0.95), rgba(7, 22, 43, 0.98));
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5), 0 0 38px rgba(112, 166, 255, 0.7);
  animation: hub-pulse 3s ease-in-out infinite alternate;
}

.center-hub .research-node-icon svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  stroke-width: 2.2px;
}

@keyframes hub-pulse {
  0% { box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(112, 166, 255, 0.4); }
  100% { box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5), 0 0 40px rgba(112, 166, 255, 0.8); }
}

.research-node-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(7, 22, 43, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.center-hub .research-node-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  border-color: rgba(112, 166, 255, 0.4);
}

/* Node Positioning inside .research-visual */
.center-hub { top: 50%; left: 50%; }
.n-top-left { top: 24%; left: 24%; animation: node-float-1 4.5s ease-in-out infinite; }
.n-top-right { top: 24%; left: 76%; animation: node-float-2 4.8s ease-in-out infinite; }
.n-bottom-right { top: 76%; left: 76%; animation: node-float-3 5.2s ease-in-out infinite; }
.n-bottom-left { top: 76%; left: 24%; animation: node-float-4 4.2s ease-in-out infinite; }

@keyframes node-float-1 { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes node-float-2 { 50% { transform: translate(-50%, calc(-50% + 6px)); } }
@keyframes node-float-3 { 50% { transform: translate(-50%, calc(-50% - 5px)); } }
@keyframes node-float-4 { 50% { transform: translate(-50%, calc(-50% + 5px)); } }

.research-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(112, 166, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.ring-1 {
  width: 320px;
  height: 320px;
  animation: radar-expand 4s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

.ring-2 {
  width: 320px;
  height: 320px;
  animation: radar-expand 4s 2s cubic-bezier(0.1, 0.7, 0.1, 1) infinite;
}

@keyframes radar-expand {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* Community visual cards */

.community {
  background-color: transparent;
  background-image: none;
}

.section-heading.split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
}

.community .section-heading {
  justify-content: center;
  text-align: center;
}

.community .section-heading h2 {
  text-align: center;
}

.community-count {
  display: flex;
  align-items: end;
  gap: 11px;
  padding-block-end: 8px;
}

.community-count strong {
  color: var(--blue-600);
  font-family: "Inter", sans-serif;
  font-size: 42px;
  line-height: 1;
}

.community-count span {
  max-width: 110px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.community-card {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--soft);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.community-card:hover {
  border-color: #bdcce1;
  box-shadow: var(--shadow-md);
  transform: translateY(-7px);
}

.community-card:hover .community-arrow {
  transform: translateX(5px);
}

html[dir="rtl"] .community-card:hover .community-arrow {
  transform: scaleX(-1) translateX(5px);
}

.community-card h3 {
  margin: 22px 0 0;
  color: var(--navy-900);
  font-size: 22px;
}

.community-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.community-arrow {
  width: 18px;
  height: 18px;
  margin-block-start: auto;
  color: var(--blue-600);
}

.community-figure {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: 17px;
  background: var(--navy-900);
}

.community-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: radial-gradient(circle, #c8d9f0 1px, transparent 1px);
  background-size: 19px 19px;
  mask-image: radial-gradient(circle, #000, transparent 76%);
}

.student-card .community-figure {
  background: linear-gradient(145deg, #173f72, var(--navy-900));
}

.student-card .head {
  position: absolute;
  width: 50px;
  height: 50px;
  inset: 48px auto auto 50%;
  border-radius: 50%;
  background: var(--blue-200);
  transform: translateX(-50%);
  animation: chip-float 4s ease-in-out infinite;
}

.student-card .body {
  position: absolute;
  width: 105px;
  height: 90px;
  inset: 108px auto auto 50%;
  border-radius: 55px 55px 15px 15px;
  background: var(--blue-500);
  transform: translateX(-50%);
}

.book {
  position: absolute;
  width: 50px;
  height: 9px;
  inset-block-end: 28px;
  border-radius: 4px;
  background: var(--white);
}

.book-a { inset-inline-start: 28px; transform: rotate(6deg); }
.book-b { inset-inline-end: 28px; background: var(--blue-300); transform: rotate(-7deg); }

.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  animation: live-pulse 2s infinite;
}

.s-a { inset: 38px 35px; }
.s-b { inset: 80px auto auto 36px; animation-delay: -1s; }

.researcher-card .community-figure {
  background: var(--navy-950);
}

.researcher-card .community-figure > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  color: rgba(140, 173, 221, 0.5);
  stroke-dasharray: 6 8;
  animation: line-run 10s linear infinite;
}

.researcher-card .node {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(140, 173, 221, 0.45);
  border-radius: 50%;
  background: rgba(79, 126, 199, 0.28);
  box-shadow: 0 0 0 8px rgba(79, 126, 199, 0.05);
  animation: research-pulse 2.5s ease-in-out infinite;
}

.researcher-card .node::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  inset: 50%;
  border-radius: 50%;
  background: var(--blue-200);
  transform: translate(-50%, -50%);
}

.researcher-card .node-a {
  top: 66%;
  left: 18%;
  transform: translate(-50%, -50%);
}

.researcher-card .node-b {
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -.8s !important;
}

.researcher-card .node-c {
  top: 66%;
  left: 82%;
  transform: translate(-50%, -50%);
  animation-delay: -1.5s !important;
}

.author-card .community-figure {
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
}

.author-card .page {
  position: absolute;
  width: 106px;
  height: 142px;
  inset: 42px auto auto 50%;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

.author-card .p-a {
  opacity: 0.3;
  transform: translateX(-67%) rotate(-10deg);
}

.author-card .p-b {
  background:
    linear-gradient(var(--border), var(--border)) 18px 36px / 68px 4px no-repeat,
    linear-gradient(var(--border), var(--border)) 18px 51px / 58px 4px no-repeat,
    linear-gradient(var(--border), var(--border)) 18px 66px / 70px 4px no-repeat,
    var(--white);
  transform: translateX(-42%) rotate(6deg);
  animation: paper-float-small 4.7s ease-in-out infinite;
}

@keyframes paper-float-small {
  50% { transform: translateX(-42%) translateY(-7px) rotate(4deg); }
}

.author-card .pen {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 92px;
  inset: 80px 45px auto auto;
  border-radius: 4px;
  background: var(--blue-300);
  transform: rotate(37deg);
}

.author-card .check {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  inset: 44px auto auto 40px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
}

.author-card .check svg { width: 17px; height: 17px; }

/* Finale and footer */

.finale {
  position: relative;
  overflow: hidden;
  padding-block: 96px 30px;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 12% 84%, rgba(79, 126, 199, 0.12), transparent 24%);
  background-repeat: no-repeat;
  background-position: bottom left;
}

.finale-card {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 48px 56px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 20%, rgba(79, 126, 199, 0.36), transparent 28%),
    var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.finale-card::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  inset-block-start: -260px;
  inset-inline-end: -90px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 65px rgba(255, 255, 255, 0.025), 0 0 0 130px rgba(255, 255, 255, 0.015);
}

.finale-logo {
  position: relative;
  z-index: 2;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: #eff1f4;
  background-clip: padding-box;
}

.finale-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}

.finale-card > div:nth-child(2) {
  position: relative;
  z-index: 2;
}

.finale-card small {
  color: var(--blue-300);
  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.finale-card h2 {
  margin-block-start: 9px;
  color: var(--white);
}

.partner-flip-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 14% 16%, rgba(79, 126, 199, 0.34), transparent 29%),
    var(--navy-900);
  box-shadow: var(--shadow-lg);
  perspective: 1800px;
}

.partner-flip-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  background:
    radial-gradient(circle at 82% 78%, rgba(79, 126, 199, 0.2), transparent 28%),
    linear-gradient(145deg, var(--navy-900), var(--navy-950));
  pointer-events: none;
}

.partner-flip-shell::after {
  content: "";
  position: absolute;
  z-index: 7;
  width: 28%;
  height: 150%;
  inset-block-start: -25%;
  left: -34%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(140, 173, 221, 0.08),
    rgba(255, 255, 255, 0.24),
    rgba(140, 173, 221, 0.08),
    transparent
  );
  opacity: 0;
  pointer-events: none;
  transform: skewX(-16deg);
}

.partner-flip-shell.is-animating::after {
  animation: partner-flip-sheen 900ms cubic-bezier(0.2, 0.76, 0.24, 1);
}

html[dir="rtl"] .partner-flip-shell.is-animating::after {
  animation-direction: reverse;
}

@keyframes partner-flip-sheen {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 590% 0;
  }
}

.partner-flip-card {
  position: relative;
  z-index: 1;
  min-height: 620px;
  border-radius: 32px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.2, 0.76, 0.24, 1);
}

.partner-flip-card.is-flipped {
  transform: rotateY(180deg);
}

html[dir="rtl"] .partner-flip-card.is-flipped {
  transform: rotateY(-180deg);
}

.partner-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 58px 64px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  background:
    radial-gradient(circle at 14% 16%, rgba(79, 126, 199, 0.34), transparent 29%),
    var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.partner-front {
  display: flex;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
  transition: opacity 120ms 380ms ease, visibility 0s 380ms;
}

.partner-back {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 48px;
  align-items: stretch;
  background:
    radial-gradient(circle at 88% 90%, rgba(79, 126, 199, 0.32), transparent 26%),
    linear-gradient(145deg, var(--navy-900), var(--navy-950));
  opacity: 0;
  visibility: hidden;
  transform: rotateY(180deg);
  transition: opacity 120ms ease, visibility 0s 450ms;
}

.partner-flip-shell.is-flipped .partner-front {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 0s 450ms;
}

.partner-flip-shell.is-flipped .partner-back {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms 380ms ease, visibility 0s 380ms;
}

.partner-arc {
  position: absolute;
  border: 1px solid rgba(140, 173, 221, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.partner-arc.arc-one {
  width: 590px;
  height: 590px;
  inset-block-start: -370px;
  inset-inline-end: -170px;
  box-shadow:
    0 0 0 68px rgba(79, 126, 199, 0.045),
    0 0 0 136px rgba(79, 126, 199, 0.025);
}

.partner-arc.arc-two {
  width: 320px;
  height: 320px;
  inset-block-end: -230px;
  inset-inline-start: 20%;
  border-color: rgba(255, 255, 255, 0.05);
}

.partner-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background: #eff1f4;
  background-clip: padding-box;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}

.partner-front-logo {
  position: absolute;
  z-index: 2;
  width: 138px;
  height: 138px;
  inset-block-start: 48px;
  inset-inline-start: 52px;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.partner-moving-logo {
  position: absolute;
  z-index: 8;
  width: 138px;
  height: 138px;
  inset-block-start: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  transition:
    inset-block-start 900ms cubic-bezier(0.2, 0.76, 0.24, 1),
    left 900ms cubic-bezier(0.2, 0.76, 0.24, 1),
    right 900ms cubic-bezier(0.2, 0.76, 0.24, 1),
    transform var(--ease);
}

.partner-moving-logo:disabled {
  opacity: 1;
  cursor: default;
}

.partner-moving-logo .partner-logo {
  width: 100%;
  height: 100%;
}

html[dir="rtl"] .partner-moving-logo {
  right: 52px;
  left: auto;
}

html[dir="ltr"] .partner-moving-logo {
  right: auto;
  left: 52px;
}

html[dir="rtl"] .partner-flip-shell.is-flipped .partner-moving-logo {
  inset-block-start: calc(100% - 190px);
  right: calc(100% - 190px);
}

html[dir="ltr"] .partner-flip-shell.is-flipped .partner-moving-logo {
  inset-block-start: calc(100% - 190px);
  left: calc(100% - 190px);
}

.partner-flip-shell.is-flipped .partner-moving-logo:hover {
  transform: rotate(-5deg) scale(1.04);
}

html[dir="rtl"] .partner-flip-shell.is-flipped .partner-moving-logo:hover {
  transform: rotate(5deg) scale(1.04);
}

.partner-front:hover .partner-front-logo {
  transform: rotate(-4deg) scale(1.04);
}

html[dir="rtl"] .partner-front:hover .partner-front-logo {
  transform: rotate(4deg) scale(1.04);
}

.partner-front-copy {
  position: relative;
  z-index: 3;
  max-width: 780px;
  margin-block-start: 92px;
}

.partner-front-copy h2,
.partner-form-heading h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.25;
  letter-spacing: -0.04em;
}

html[dir="rtl"] .partner-front-copy h2,
html[dir="rtl"] .partner-form-heading h2 {
  letter-spacing: 0;
}

.partner-front-copy > p {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.9;
}

.partner-open-button,
.partner-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  background: var(--white);
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}

.partner-open-button {
  margin-block-start: 28px;
}

.partner-open-button:hover,
.partner-submit-button:hover {
  background: var(--blue-100);
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.partner-button-arrow {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  transition: transform var(--ease);
}

html[dir="ltr"] .partner-button-arrow {
  transform: rotate(180deg);
}

.partner-open-button:hover .partner-button-arrow {
  translate: -4px 0;
}

html[dir="ltr"] .partner-open-button:hover .partner-button-arrow {
  translate: 4px 0;
}

.partner-form {
  min-width: 0;
}

.partner-form-heading h2 {
  font-size: clamp(32px, 3.6vw, 48px);
}

.partner-form-heading > p {
  max-width: 650px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

.partner-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-block-start: 24px;
}

.partner-fields label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 600;
}

.partner-fields .organization-field,
.partner-fields .description-field {
  grid-column: 1 / -1;
}

.partner-fields input,
.partner-fields textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  outline: 0;
  background: rgba(255, 255, 255, 0.075);
  color: var(--white);
  font: inherit;
  font-size: 12px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.partner-fields input {
  height: 48px;
  padding-inline: 15px;
}

.partner-fields textarea {
  min-height: 110px;
  padding: 13px 15px;
  resize: vertical;
}

.partner-fields input::placeholder,
.partner-fields textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.partner-fields input:focus,
.partner-fields textarea:focus {
  border-color: var(--blue-300);
  background: rgba(255, 255, 255, 0.105);
  box-shadow: 0 0 0 4px rgba(140, 173, 221, 0.12);
}

.partner-form-actions {
  margin-block-start: 22px;
}

.partner-back-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
}

.partner-submit-button {
  width: fit-content;
  background: var(--blue-100);
}

.partner-return-button {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  cursor: pointer;
}

.partner-back-logo {
  width: 132px;
  height: 132px;
  transition: transform var(--ease), box-shadow var(--ease);
}

.partner-return-button:hover .partner-back-logo {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
  transform: rotate(-5deg) scale(1.04);
}

html[dir="rtl"] .partner-return-button:hover .partner-back-logo {
  transform: rotate(5deg) scale(1.04);
}

.partner-form-status {
  position: absolute;
  z-index: 5;
  inset-block-end: 26px;
  inset-inline-start: 64px;
  max-width: 620px;
  margin: 0;
  color: #8de0be;
  font-size: 11px;
}

.partner-form-status:empty {
  display: none;
}

.site-footer {
  padding-block: 28px 0;
  background: var(--navy-950);
  color: var(--white);
}

.footer-shell {
  border-block-start: 1px solid rgba(255, 255, 255, 0.13);
}

.footer-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 110px);
  padding-block: 62px 52px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.13);
}

.footer-column {
  min-width: 0;
}

.footer-column h2 {
  margin: 0 0 24px;
  color: var(--white);
  font-size: 22px;
  line-height: 1.3;
}

.footer-about p {
  max-width: 360px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 2;
}

.footer-contact ul {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
}

.footer-contact li svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--blue-200);
}

.footer-contact a {
  color: inherit;
  transition: color var(--ease);
}

.footer-contact a:hover,
.footer-platform-links a:hover {
  color: var(--white);
}

.footer-socials {
  display: flex;
  direction: ltr;
  gap: 14px;
}

html[dir="rtl"] .footer-socials {
  justify-content: flex-end;
}

.footer-socials a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--ease), background var(--ease), transform var(--ease);
}

.footer-socials a:hover {
  color: var(--white);
  background: rgba(79, 126, 199, 0.3);
  transform: translateY(-3px);
}

.footer-socials svg {
  width: 21px;
  height: 21px;
}

.footer-platform-links {
  display: grid;
  gap: 10px;
  margin-block-start: 28px;
}

.footer-platform-links a {
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--ease);
}

.footer-sponsor {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-block-start: 28px;
}

.footer-sponsor > span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.footer-sponsor a {
  width: min(195px, 100%);
  display: block;
  overflow: hidden;
  border-radius: 8px;
  transition: transform var(--ease);
}

.footer-sponsor a:hover {
  transform: translateY(-2px);
}

.footer-sponsor img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-bottom {
  padding-block: 26px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
}

/* Dialog */

.platform-dialog {
  width: min(calc(100% - 32px), 550px);
  padding: 38px;
  border: 0;
  border-radius: 28px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.platform-dialog::backdrop {
  background: rgba(6, 19, 38, 0.8);
  backdrop-filter: blur(7px);
}

.platform-dialog[open] {
  animation: dialog-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
}

.dialog-close {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.dialog-close svg {
  width: 18px;
  height: 18px;
}

.dialog-visual {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin-block-end: 26px;
  border-radius: 24px;
  background: var(--blue-100);
  color: var(--blue-600);
}

.dialog-visual svg {
  width: 40px;
  height: 40px;
}

.platform-dialog > small {
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 700;
}

.platform-dialog h2 {
  margin: 7px 0 12px;
  color: var(--navy-900);
  font-size: 29px;
}

.platform-dialog > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.dialog-actions {
  margin-block-start: 30px;
}

/* Responsive */

@media (max-width: 1080px) {
  .desktop-nav { gap: 20px; }
  .hero-layout { gap: 28px; }
  .knowledge-scene { max-width: 537px; min-height: 0; }
  .satellite { min-width: 150px; }
  .satellite-ring { --orbit-radius: 205px; }
  .about-layout { grid-template-columns: 1fr; gap: 54px; }
  .about-copy { max-width: 820px; }
  .about-copy > p { max-width: 760px; }
  .about-experience { grid-template-columns: 230px minmax(0, 1fr); }
  .platform-panel { grid-template-columns: 1.15fr 0.85fr; }
  .platform-panel:nth-child(even) { grid-template-columns: 0.85fr 1.15fr; }
  .community-card { min-height: 365px; }
}

@media (min-width: 881px) and (max-width: 1400px) {
  .hero h1 { font-size: 56px; }
}

@media (max-width: 880px) {
  :root { --header: 72px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .desktop-nav { display: none; }
  .menu-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  .menu-button span {
    width: 18px;
    height: 1.5px;
    background: var(--white);
    transition: transform var(--ease);
  }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .mobile-nav {
    position: fixed;
    inset: var(--header) 0 auto;
    display: grid;
    padding: 12px 16px 18px;
    background: rgba(7, 22, 43, 0.98);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--ease), transform var(--ease);
  }
  .mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-nav a {
    padding: 13px 8px;
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
  }
  .hero { min-height: auto; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .hero-copy { max-width: 680px; }
  .knowledge-scene { max-width: 598px; width: 100%; margin-inline: auto; }
  .hero h1 { max-width: 100%; }
  .hero h1 { align-self: center; }
  .hero .hero-title-inline { flex-wrap: wrap; }
  .hero-copy { margin-inline-start: 0; }
  /* The scene now tracks the viewport, so the orbit pulls in to match. */
  .satellite-ring { --orbit-radius: min(190px, 26vw); }
  .about-experience { grid-template-columns: 1fr; }
  .about-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-tab { min-height: 112px; }
  .about-stage { min-height: 500px; }
  .platform-panel,
  .platform-panel:nth-child(even) { grid-template-columns: 1fr; }
  .platform-panel:nth-child(even) .panel-copy { order: 0; }
  .education-visual,
  .research-visual { min-height: 380px; }
  .community-grid { grid-template-columns: repeat(3, 1fr); }
  .finale-card { grid-template-columns: auto 1fr; }
  .partner-flip-card { min-height: 700px; }
  .partner-face { padding: 48px; }
  .partner-back { grid-template-columns: minmax(0, 1fr) 160px; gap: 30px; }
  .partner-front-copy { max-width: 650px; }
  .partner-moving-logo { width: 120px; height: 120px; inset-block-start: 48px; }
  html[dir="rtl"] .partner-moving-logo { right: 48px; }
  html[dir="ltr"] .partner-moving-logo { left: 48px; }
  html[dir="rtl"] .partner-flip-shell.is-flipped .partner-moving-logo {
    inset-block-start: calc(100% - 168px);
    right: calc(100% - 168px);
  }
  html[dir="ltr"] .partner-flip-shell.is-flipped .partner-moving-logo {
    inset-block-start: calc(100% - 168px);
    left: calc(100% - 168px);
  }
  .partner-back-actions { padding-block-end: 136px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-follow { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .logo-mark { width: 42px; height: 42px; border-radius: 12px; }
  .language-switch { min-width: 56px; }
  .hero { padding-block-start: calc(var(--header) + 54px); }
  .hero-copy { min-width: 0; }
  .eyebrow { max-width: 100%; align-items: flex-start; line-height: 1.45; }
  .live-dot { margin-block-start: 5px; }
  .hero h1 { font-size: clamp(39px, 11vw, 48px); line-height: 1.3; }
  .hero-copy > p { font-size: 15px; }
  .hero-bottom-row { flex-wrap: wrap; }
  .hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-stats { justify-content: space-between; }
  .hero-stats > div { min-width: 0; padding-inline-end: 18px; }
  .hero-stats > div + div { padding-inline-start: 18px; }
  .knowledge-scene { aspect-ratio: 1 / 1; min-height: 0; max-width: none; border-radius: 24px; transform: none !important; }
  .knowledge-scene .orbit { display: block; opacity: 0.35; animation-duration: 46s; }
  .satellite {
    width: calc(100% - 40px);
    min-width: 0;
    inset-inline: 20px;
    transform: none;
    animation: satellite-float-mobile 5.4s ease-in-out infinite;
  }
  .satellite-research { animation-duration: 6.2s; animation-delay: -2s; }
  .satellite:hover { transform: translateY(-3px); }

  /* No orbit on mobile: the wrappers generate no boxes, so the chips position
     against .knowledge-scene and stack exactly as they did before. */
  .satellite-ring,
  .satellite-slot,
  .satellite-unturn,
  .satellite-spin { display: contents; }
  .satellite-ring .satellite { position: absolute; }
  .section { padding-block: 78px; }
  .section-heading h2 { font-size: 34px; }
  .about-layout { gap: 38px; }
  .about-copy h2 { font-size: 38px; }
  .about-copy > p { margin-block-start: 20px; font-size: 13px; }
  .about-vision { margin-block-start: 26px; padding: 18px; }
  .about-tabs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-block-end: 5px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .about-tabs::-webkit-scrollbar { display: none; }
  .about-tab {
    min-width: 208px;
    min-height: 100px;
    scroll-snap-align: start;
  }
  .about-stage { min-height: 440px; border-radius: 24px; }
  .orbit-wide { width: 330px; height: 330px; }
  .orbit-tight { width: 225px; height: 225px; }
  .about-core { width: 150px; height: 150px; }
  .about-core-logo { width: 52px; height: 47px; }
  .about-node { min-width: 90px; padding: 9px 10px; }
  .about-node b { font-size: 8px; }
  .about-node.node-a { inset-block-start: 14%; left: 3%; }
  .about-node.node-b { inset-block-start: 14%; right: 3%; }
  .about-node.node-d { inset-block-start: 48%; left: 1%; }
  .about-node.node-e { inset-block-start: 48%; right: 1%; }
  .platform-node { min-width: 106px; }
  .platform-showcase { gap: 16px; }
  .panel-copy { padding: 32px 24px; }
  .panel-copy h3 { font-size: 28px; }
  .panel-action { margin-block-start: 28px; }
  .education-visual,
  .research-visual { min-height: 330px; }
  .course-card { width: 260px; height: 190px; }
  .education-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-stats .platform-stat:last-child { grid-column: 1 / -1; }
  .section-heading.split { align-items: flex-start; flex-direction: column; gap: 24px; }
  .community-grid { grid-template-columns: 1fr; }
  .community-card { min-height: 350px; }
  .community-figure { height: 205px; }
  .finale { padding-block: 64px 20px; }
  .finale-card { grid-template-columns: 1fr; padding: 34px 26px; }
  .finale-logo { width: 108px; height: 108px; }
  .finale-card h2 { font-size: 34px; }
  .partner-flip-card { min-height: 900px; border-radius: 24px; }
  .partner-face { padding: 32px 24px; }
  .partner-front { align-items: center; }
  .partner-moving-logo {
    width: 104px;
    height: 104px;
    inset-block-start: 28px;
  }
  html[dir="rtl"] .partner-moving-logo { right: 28px; }
  html[dir="ltr"] .partner-moving-logo { left: 28px; }
  html[dir="rtl"] .partner-flip-shell.is-flipped .partner-moving-logo {
    inset-block-start: calc(100% - 132px);
    right: calc(100% - 132px);
  }
  html[dir="ltr"] .partner-flip-shell.is-flipped .partner-moving-logo {
    inset-block-start: calc(100% - 132px);
    left: calc(100% - 132px);
  }
  .partner-front-copy { margin-block-start: 94px; }
  .partner-front-copy h2 { font-size: 38px; }
  .partner-front-copy > p { font-size: 13px; }
  .partner-open-button { width: 100%; }
  .partner-back {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }
  .partner-form-heading h2 { font-size: 31px; }
  .partner-fields { grid-template-columns: 1fr; gap: 13px; margin-block-start: 20px; }
  .partner-fields .organization-field,
  .partner-fields .description-field { grid-column: 1; }
  .partner-fields textarea { min-height: 100px; }
  .partner-back-actions {
    width: 148px;
    justify-self: end;
    gap: 12px;
    padding-block-end: 116px;
  }
  .partner-form-status {
    inset-block-end: 26px;
    inset-inline-start: 24px;
    max-width: calc(100% - 200px);
  }
  .site-footer { padding-block-start: 20px; }
  .footer-main { grid-template-columns: 1fr; gap: 38px; padding-block: 44px 38px; }
  .footer-follow { grid-column: auto; }
  .footer-column h2 { margin-block-end: 18px; font-size: 20px; }
  .footer-bottom { padding-block: 22px; }
  .platform-dialog { padding: 34px 24px 26px; }

  .ilm-landing-page { background-size: auto, auto, 1100px 688px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .research-traveler {
    display: none;
  }

  .network-signal {
    display: none;
  }
}


/* === Landing-page typography scope ===
   Two application-level rules were overriding the authored landing typography:
   1. src/index.css sets `* { font-family: 'Cairo', sans-serif }`, which beats
      inheritance on every element (and forced Cairo even in English/LTR).
   2. Tailwind's preflight sets `h1..h6 { font-size: inherit; font-weight: inherit }`,
      which stripped the heavy heading weight of the original design.
   The selectors below are scoped to the landing root and kept at a low
   specificity so the authored rules in this file still win. */
:where(.ilm-landing-page) * {
  font-family: "Cairo", Arial, sans-serif;
}

html[lang="en"] :where(.ilm-landing-page) *,
html[dir="ltr"] :where(.ilm-landing-page) * {
  font-family: "Inter", Arial, sans-serif;
}

.ilm-landing-page :where(h1, h2, h3, h4, h5, h6) {
  font-size: revert;
  font-weight: 700;
}

.ilm-landing-page :where(b, strong) {
  font-weight: 700;
}

.ilm-landing-page :where(button, input, textarea, select) {
  font-family: inherit;
}


/* === Inquiry card corrections ===
   1. Tailwind's `.container` utility (padding: 2rem) applied to the landing
      markup's own `.container` class and pushed the flip card 32px inside its
      shell, which read as a thick navy frame. The landing container is a plain
      width/centering helper, so the padding is reset within the landing root.
   2. The resting faces used `translateZ(1px)`, which promoted the front face to
      its own composited layer at fractional coordinates and blurred the text.
   3. Explicit weights so no reset leaves synthetic/incorrect weights. */
.ilm-landing-page .container {
  padding-block: 0;
  padding-inline: 0;
}

.partner-flip-shell {
  padding: 0;
}

.partner-flip-card {
  width: 100%;
  margin: 0;
  padding: 0;
}

.partner-flip-card:not(.is-flipped) {
  transform: none;
}

.partner-face {
  width: 100%;
  height: 100%;
  margin: 0;
}

.partner-front-copy,
.partner-front-copy h2,
.partner-front-copy > p,
.partner-open-button {
  text-shadow: none;
  filter: none;
}

.partner-front-copy {
  transform: none;
  opacity: 1;
}

.partner-front-copy h2 {
  font-weight: 700;
}

.partner-front-copy > p {
  font-weight: 400;
}

.partner-open-button {
  font-size: 12px;
  font-weight: 600;
}

.partner-flip-shell.is-animating .partner-flip-card {
  will-change: transform;
}

.partner-flip-shell:not(.is-animating) .partner-flip-card {
  will-change: auto;
}

/* Responsive audit — 12px legibility floor on phones/small tablets. */
@media (max-width: 640px) {
  .about-state .about-node b,
  .about-tab small,
  .partner-fields label span,
  .partner-form-heading p,
  .course-card-front small { font-size: 12px; }
}

/* ── Landing boot ──────────────────────────────────────────────────────── */
html.is-booting-landing .hero { min-height: 100svh; }

/* Everything except the object steps back. */
html.is-booting-landing .site-header,
html.is-booting-landing .hero-copy,
html.is-booting-landing .hero-bottom-group,
html.is-booting-landing .site-footer,
html.is-booting-landing main > section:not(.hero) { opacity: 0; }
.site-header, .hero-copy, .hero-bottom-group { transition: opacity 520ms ease 220ms; }

/* The frame stays empty until the object is home. */
html.is-booting-landing .scene-surface,
html.is-booting-landing .knowledge-scene > .particle { opacity: 0 !important; }
html.is-booting-landing .knowledge-scene {
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  /* Neutralises the scene's perspective() for the duration. Load-bearing:
     with it in place the scene is the containing block for its descendants. */
  transform: none;
}

/* Nothing below the fold may peek through while the object is in flight. */
html.is-booting-landing body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(122deg, #0b1f3a, #061326);
  pointer-events: none;
}

.scene-surface, .knowledge-scene > .particle { transition: opacity 520ms ease; }

/* Extends the existing .knowledge-scene transition — keep the transform entry
   or the pointer tilt turns into a jump. */
.knowledge-scene {
  transition:
    border-color 520ms ease,
    background 520ms ease,
    box-shadow 520ms ease,
    transform 140ms ease-out;
}

/* ---------------------------------------------------------------------------
   Scroll performance
   The page is one tall canvas of blurred gradients and animated art. Without
   these hints the browser repaints every layer on each scroll frame.
   --------------------------------------------------------------------------- */

/* Off-screen sections are skipped entirely until they approach the viewport.
   The intrinsic size keeps the scrollbar and anchor offsets stable. */
.ilm-landing-page > .about.section,
.ilm-landing-page > .platforms.section,
.ilm-landing-page > .finale {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* The fixed header blurs whatever is behind it; promoting it to its own layer
   stops that blur from re-rasterising the page underneath on every frame. */
.site-header {
  will-change: background-color;
  transform: translateZ(0);
}

/* Continuously animated hero art belongs on the compositor, not the main thread. */
.hero-aurora,
.hub-core,
.satellite,
.orbit {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora,
  .hub-core,
  .satellite,
  .orbit,
  .site-header {
    will-change: auto;
  }
}

/* Backdrop blur on elements that either animate every frame (orbit satellites,
   about nodes) or repeat many times down the page (course cards) forced a
   re-rasterisation of everything behind them on each scroll frame. They keep
   their translucent glass tint without the per-frame blur. */
.satellite,
.orbit-token-face,
.about-core,
.about-node,
.course-card,
.research-node-icon,
.research-node-label {
  backdrop-filter: none;
}