@font-face {
  font-family: "Sufi Display";
  src:
    local("Vazirmatn"),
    local("Vazir"),
    url("./fonts/Vazir-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sufi Display";
  src:
    local("Vazirmatn Bold"),
    local("Vazir Bold"),
    url("./fonts/Vazir-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --canvas: #050712;
  --canvas-elevated: #0b1020;
  --surface: #11182a;
  --surface-bright: #172238;
  --ivory: #f7f8fc;
  --text: #e7eaf2;
  --muted: #a8b2c7;
  --dim: #748096;
  --line: rgb(168 178 199 / 16%);
  --line-bright: rgb(168 178 199 / 30%);
  --violet: #7c3aed;
  --violet-light: #a78bfa;
  --cyan: #22d3ee;
  --cyan-dark: #0891b2;
  --indigo: #4f46e5;
  --amber: #c27a16;
  --emerald: #1d8a62;
  --danger: #dc5f6d;
  --shell: 1240px;
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --font-display: "Sufi Display", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-subtitle: "Sufi Display", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-body: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-rtl: "Sufi Display", Tahoma, Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-x: clip;
  background: var(--canvas);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

[dir="rtl"] body {
  font-family: var(--font-rtl);
  line-height: 1.8;
}

[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] small {
  unicode-bidi: plaintext;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] strong,
[dir="rtl"] button,
[dir="rtl"] select {
  font-family: var(--font-rtl);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  line-height: 1.35;
}

[dir="rtl"] .brand-copy small,
[dir="rtl"] .primary-nav a,
[dir="rtl"] .chapter-label,
[dir="rtl"] .alpha-signal,
[dir="rtl"] .spread-label,
[dir="rtl"] .layer-status,
[dir="rtl"] .stage-index,
[dir="rtl"] .product-status,
[dir="rtl"] .horizon-band b {
  font-family: var(--font-rtl);
  letter-spacing: 0;
}

a {
  color: inherit;
}

button,
select {
  font: inherit;
}

svg {
  display: block;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ivory);
  color: var(--canvas);
  transform: translateY(-160%);
}

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

:focus-visible {
  outline: 3px solid rgb(34 211 238 / 65%);
  outline-offset: 4px;
}

.global-atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
}

.atmosphere-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.atmosphere-light {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .1;
}

.atmosphere-light-violet {
  inset-block-start: -30vw;
  inset-inline-start: -20vw;
  background: var(--violet);
}

.atmosphere-light-cyan {
  inset-block-start: 35vh;
  inset-inline-end: -35vw;
  background: var(--cyan-dark);
}

.site-header {
  position: fixed;
  z-index: 50;
  inset-block-start: 0;
  inset-inline: 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: rgb(5 7 18 / 72%);
  backdrop-filter: blur(18px) saturate(150%);
}

.header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 13px;
  background: rgb(255 255 255 / 6%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 12px 28px rgb(0 0 0 / 20%);
}

.brand-symbol img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.brand-copy {
  display: grid;
  line-height: 1.2;
}

.brand-copy strong {
  font-family: var(--font-display);
  font-size: .98rem;
  letter-spacing: -.02em;
}

.brand-copy small {
  margin-top: 3px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-inline: auto;
}

.primary-nav a {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--dim);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .22s var(--ease-out);
}

.primary-nav a::before {
  content: attr(data-chapter);
  color: rgb(168 178 199 / 42%);
  font-family: var(--font-mono);
  font-size: .56rem;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 3px;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease-out);
}

.primary-nav a:hover,
.primary-nav a.is-active,
.primary-nav a:focus-visible {
  color: var(--ivory);
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.language-picker select {
  min-width: 62px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  color: var(--text);
  cursor: pointer;
}

.language-picker option {
  background: var(--canvas-elevated);
}

.text-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.text-action svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .2s var(--ease-out);
}

[dir="rtl"] .text-action svg {
  transform: scaleX(-1);
}

.text-action:hover svg {
  transform: translateX(3px);
}

[dir="rtl"] .text-action:hover svg {
  transform: scaleX(-1) translateX(3px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgb(255 255 255 / 5%);
  color: var(--ivory);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.scene {
  position: relative;
  z-index: 1;
}

.hero-scene {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 128px 0 72px;
}

.constellation-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .72;
  pointer-events: none;
}

.hero-horizon {
  position: absolute;
  z-index: 0;
  width: 90vw;
  height: 90vw;
  inset-block-end: -80vw;
  inset-inline-start: 5vw;
  border: 1px solid rgb(124 58 237 / 18%);
  border-radius: 50%;
  box-shadow:
    0 -20px 90px rgb(79 70 229 / 10%),
    inset 0 20px 90px rgb(34 211 238 / 4%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(580px, 1.12fr);
  align-items: center;
  gap: 48px;
}

.chapter-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.chapter-label span {
  color: var(--cyan);
}

.chapter-label i {
  width: 44px;
  height: 1px;
  background: var(--line-bright);
}

.chapter-label b {
  font-weight: 500;
}

[dir="rtl"] .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

.alpha-signal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--violet-light);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
}

.alpha-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-light);
  box-shadow: 0 0 0 5px rgb(124 58 237 / 13%), 0 0 24px rgb(124 58 237 / 70%);
}

.alpha-signal-cyan {
  color: var(--cyan);
}

.alpha-signal-cyan i {
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgb(34 211 238 / 12%), 0 0 24px rgb(34 211 238 / 65%);
}

.hero-copy h1 {
  max-width: 690px;
  margin: 20px 0 22px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.2vw, 3.8rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.065em;
}

[dir="rtl"] .hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(3.2rem, 5.5vw, 3.8rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}

.hero-lead {
  max-width: 680px;
  margin: 0;
  color: #c5ccda;
  font-family: var(--font-subtitle);
  font-size: clamp(1.04rem, 1.65vw, 1.27rem);
  font-weight: 400;
  line-height: 1.75;
}

.hero-note {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--dim);
  font-family: var(--font-subtitle);
  font-size: .9rem;
}

.hero-actions,
.invitation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.signal-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform .22s var(--ease-out),
    border-color .22s var(--ease-out),
    background .22s var(--ease-out),
    box-shadow .22s var(--ease-out);
}

.signal-button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

[dir="rtl"] .signal-button svg {
  transform: scaleX(-1);
}

.signal-button:hover {
  transform: translateY(-2px);
}

.signal-button:active {
  transform: scale(.985);
}

.signal-button-primary {
  background: linear-gradient(135deg, var(--violet), var(--indigo));
  color: #fff;
  box-shadow: 0 15px 40px rgb(79 70 229 / 28%);
}

.signal-button-primary:hover {
  box-shadow: 0 20px 50px rgb(79 70 229 / 38%);
}

.signal-button-ghost {
  border-color: var(--line);
  background: rgb(255 255 255 / 4%);
  color: var(--text);
}

.signal-button-ghost:hover {
  border-color: rgb(167 139 250 / 40%);
  background: rgb(124 58 237 / 8%);
}

.architecture-stage {
  position: relative;
  perspective: 1200px;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
}

.architecture-frame {
  position: relative;
  min-height: 680px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%) 46%, rgb(34 211 238 / 2.5%)),
    rgb(5 7 18 / 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    inset 0 -100px 140px rgb(3 5 14 / 34%),
    0 45px 100px rgb(0 0 0 / 34%),
    0 0 80px rgb(79 70 229 / 8%);
  transform:
    translate3d(var(--hero-shift-x), var(--hero-shift-y), 0)
    rotateX(calc(2deg + var(--hero-tilt-x)))
    rotateY(calc(-4deg + var(--hero-tilt-y)));
  transform-style: preserve-3d;
  backdrop-filter: blur(14px);
  transition: transform .8s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

[dir="rtl"] .architecture-frame {
  transform:
    translate3d(var(--hero-shift-x), var(--hero-shift-y), 0)
    rotateX(calc(2deg + var(--hero-tilt-x)))
    rotateY(calc(4deg + var(--hero-tilt-y)));
}

.architecture-frame::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgb(34 211 238 / 8%) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgb(124 58 237 / 7%) 50%, transparent 50.2%);
  mask-image: radial-gradient(circle at center, #000, transparent 70%);
  pointer-events: none;
}

.architecture-frame::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 28%, rgb(255 255 255 / 7%) 48%, transparent 64%);
  opacity: .42;
  transform: translateX(-120%);
  pointer-events: none;
}

.architecture-aurora {
  position: absolute;
  z-index: -3;
  width: 440px;
  aspect-ratio: 1;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 38%, rgb(34 211 238 / 30%), transparent 34%),
    radial-gradient(circle at 66% 62%, rgb(124 58 237 / 44%), transparent 42%);
  filter: blur(38px);
  opacity: .82;
  transform: translate(-50%, -50%);
}

.architecture-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(124 149 201 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(124 149 201 / 7%) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  opacity: .55;
  transform: translateZ(-20px);
}

.frame-corner {
  z-index: 12;
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgb(34 211 238 / 45%);
}

.frame-corner-a {
  inset-block-start: 18px;
  inset-inline-start: 18px;
  border-block-start: 1px solid;
  border-inline-start: 1px solid;
}

.frame-corner-b {
  inset-block-start: 18px;
  inset-inline-end: 18px;
  border-block-start: 1px solid;
  border-inline-end: 1px solid;
}

.frame-corner-c {
  inset-block-end: 18px;
  inset-inline-start: 18px;
  border-block-end: 1px solid;
  border-inline-start: 1px solid;
}

.frame-corner-d {
  inset-block-end: 18px;
  inset-inline-end: 18px;
  border-block-end: 1px solid;
  border-inline-end: 1px solid;
}

.architecture-links {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgb(34 211 238 / 16%));
}

.link-line,
.link-ring {
  fill: none;
  stroke: url(#link-gradient);
  stroke-width: 1.2;
  opacity: .48;
  stroke-dasharray: 7 9;
  vector-effect: non-scaling-stroke;
}

.link-ring {
  stroke: rgb(167 139 250 / 24%);
  stroke-dasharray: 3 9;
}

.link-ring-outer {
  stroke: rgb(34 211 238 / 15%);
}

.core-flare {
  opacity: .26;
}

.signal-particle {
  fill: var(--cyan);
  filter: drop-shadow(0 0 7px var(--cyan));
}

.architecture-status {
  position: absolute;
  z-index: 7;
  inset-block-start: 22px;
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(197 204 218 / 72%);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateX(-50%) translateZ(32px);
  white-space: nowrap;
}

[dir="rtl"] .architecture-status {
  font-family: var(--font-rtl);
  letter-spacing: 0;
  text-transform: none;
}

.architecture-status-signal {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.architecture-core {
  position: absolute;
  z-index: 4;
  width: 178px;
  height: 178px;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgb(167 139 250 / 45%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, rgb(255 255 255 / 12%), transparent 25%),
    radial-gradient(circle, rgb(124 58 237 / 30%), rgb(8 12 27 / 94%) 66%);
  box-shadow:
    0 0 80px rgb(124 58 237 / 24%),
    0 0 32px rgb(34 211 238 / 12%),
    inset 0 0 44px rgb(124 58 237 / 17%);
  transform: translate(-50%, -50%) translateZ(64px);
}

[dir="rtl"] .architecture-core {
  transform: translate(-50%, -50%) translateZ(64px);
}

.architecture-core img {
  width: 68px;
  height: 68px;
  border-radius: 19px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 32%), 0 0 28px rgb(124 58 237 / 22%);
}

.architecture-core strong {
  margin-top: 10px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: .94rem;
}

.architecture-core small {
  color: var(--dim);
  font-size: .65rem;
}

.core-pulse {
  position: absolute;
  inset: -16px;
  border: 1px solid rgb(124 58 237 / 25%);
  border-radius: 50%;
}

.core-orbit {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  pointer-events: none;
}

.core-orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  inset-block-start: 50%;
  inset-inline-end: -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.core-orbit-a {
  inset: -32px;
  border-color: rgb(34 211 238 / 24%);
  color: var(--cyan);
}

.core-orbit-b {
  inset: -54px;
  border-color: rgb(167 139 250 / 18%);
  color: var(--violet-light);
}

.architecture-node {
  position: absolute;
  z-index: 5;
  width: 192px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 48%),
    rgb(8 13 29 / 86%);
  box-shadow:
    0 20px 50px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 0 0 1px rgb(124 58 237 / 3%);
  backdrop-filter: blur(13px);
  transform: translateZ(28px);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}

.architecture-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 10%, rgb(34 211 238 / 11%), transparent 40%);
  opacity: .65;
  pointer-events: none;
}

.architecture-node-wide {
  width: 230px;
}

.node-beacon {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 15px rgb(124 58 237 / 80%);
}

.architecture-node strong,
.node-kicker,
.node-meta,
.node-chips {
  position: relative;
  z-index: 1;
}

.architecture-node strong {
  display: block;
  margin-top: 7px;
  color: var(--ivory);
  font-size: .72rem;
  line-height: 1.38;
}

.architecture-node strong i {
  color: var(--cyan);
  font-style: normal;
}

.node-kicker {
  display: block;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[dir="rtl"] .node-kicker {
  font-family: var(--font-rtl);
  letter-spacing: 0;
  text-transform: none;
}

.node-meta {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font-size: .56rem;
  line-height: 1.45;
}

.node-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.node-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid rgb(168 178 199 / 13%);
  border-radius: 999px;
  background: rgb(255 255 255 / 3%);
  color: rgb(213 218 230 / 78%);
  font-size: .47rem;
  line-height: 1.25;
}

.node-experience {
  inset-block-start: 78px;
  inset-inline-start: 46px;
}

.node-foundation {
  inset-block-start: 66px;
  inset-inline-end: 30px;
}

.node-services {
  inset-block-start: 270px;
  inset-inline-end: 10px;
}

.node-alpha {
  inset-block-end: 58px;
  inset-inline-start: 24px;
}

.node-future {
  inset-block-end: 48px;
  inset-inline-end: 35px;
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  inset-block-end: 22px;
  inset-inline-start: 50%;
  width: 26px;
  height: 46px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  transform: translateX(-50%);
}

.scroll-cue span {
  position: absolute;
  width: 3px;
  height: 8px;
  inset-block-start: 9px;
  inset-inline-start: 50%;
  border-radius: 999px;
  background: var(--cyan);
  transform: translateX(-50%);
  animation: scroll-cue 1.8s var(--ease-smooth) infinite;
}

.manuscript-scene,
.product-scene {
  padding: 120px 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 1.5%), transparent 220px),
    var(--canvas);
}

.scene-heading {
  max-width: 960px;
  margin-bottom: 60px;
}

.scene-heading h2 {
  margin: 16px 0 18px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
}

[dir="rtl"] .scene-heading h2 {
  line-height: 1.16;
  letter-spacing: -.02em;
}

.mixed-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .18em;
}

.scene-heading-centered .mixed-title {
  justify-content: center;
}

.mixed-title bdi {
  unicode-bidi: isolate;
}

[dir="rtl"] .mixed-title [data-i18n] {
  direction: rtl;
  unicode-bidi: isolate;
}

.scene-heading > p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-subtitle);
  font-size: 1.04rem;
  line-height: 1.75;
}

.scene-heading-centered {
  margin-inline: auto;
  text-align: center;
}

.scene-heading-centered .chapter-label {
  justify-content: center;
}

.scene-heading-centered > p {
  margin-inline: auto;
}

.experience-spread {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(420px, 1.25fr) minmax(0, .72fr);
  align-items: center;
  gap: 28px;
}

.experience-column {
  position: relative;
  min-height: 430px;
  padding: 30px;
  border-block: 1px solid var(--line);
}

.experience-column::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  inset-block-start: -1px;
  inset-inline-start: 0;
  border-block-start: 1px solid var(--cyan-dark);
  border-inline-start: 1px solid var(--cyan-dark);
}

.experience-theme::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--violet);
  border-block-start-color: var(--violet);
}

.spread-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .57rem;
}

.spread-label b {
  color: var(--cyan);
  font-weight: 500;
}

.experience-theme .spread-label b {
  color: var(--violet-light);
}

.experience-column h3 {
  margin: 38px 0 14px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 2rem;
}

.experience-column > p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.annotation-list {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.annotation-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}

.annotation-list span {
  color: var(--cyan-dark);
  font-family: var(--font-mono);
  font-size: .6rem;
}

.annotation-list p {
  margin: 0;
  color: #c2c9d7;
  font-size: .8rem;
}

.repository-link {
  width: fit-content;
  min-height: 52px;
  display: inline-grid;
  grid-template-columns: 25px auto 17px;
  align-items: center;
  gap: 11px;
  margin-top: 28px;
  padding: 8px 13px;
  border: 1px solid rgb(34 211 238 / 24%);
  border-radius: 12px;
  background: linear-gradient(110deg, rgb(34 211 238 / 8%), rgb(255 255 255 / 2%));
  color: var(--ivory);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  transition:
    transform .22s var(--ease-out),
    border-color .22s var(--ease-out),
    background .22s var(--ease-out),
    box-shadow .22s var(--ease-out);
}

.repository-link:hover {
  transform: translateY(-2px);
  border-color: rgb(34 211 238 / 52%);
  background: linear-gradient(110deg, rgb(34 211 238 / 13%), rgb(124 58 237 / 6%));
  box-shadow: 0 16px 36px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 9%);
}

.repository-link-violet {
  border-color: rgb(167 139 250 / 28%);
  background: linear-gradient(110deg, rgb(124 58 237 / 11%), rgb(255 255 255 / 2%));
}

.repository-link-violet:hover {
  border-color: rgb(167 139 250 / 58%);
}

.repository-link-platform {
  margin-top: 26px;
  border-color: rgb(194 122 22 / 34%);
  background: linear-gradient(110deg, rgb(194 122 22 / 12%), rgb(255 255 255 / 2%));
}

.repository-link-platform:hover {
  border-color: rgb(240 196 121 / 58%);
  background: linear-gradient(110deg, rgb(194 122 22 / 17%), rgb(124 58 237 / 5%));
}

.repository-link span {
  display: grid;
  line-height: 1.15;
}

.repository-link small {
  color: var(--dim);
  font-size: .61rem;
}

.repository-link b {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 650;
}

.repository-mark {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.repository-arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.7;
  transition: transform .22s var(--ease-out);
}

.repository-link-violet .repository-arrow {
  stroke: var(--violet-light);
}

.repository-link-platform .repository-arrow {
  stroke: #f0c479;
}

.repository-link:hover .repository-arrow {
  transform: translate(2px, -2px);
}

[dir="rtl"] .repository-link {
  direction: rtl;
}

[dir="rtl"] .repository-link:hover .repository-arrow {
  transform: translate(-2px, -2px);
}

.shell-cutaway {
  position: relative;
  perspective: 1000px;
}

.cutaway-window {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 28px;
  background: linear-gradient(145deg, #182138, #0c1222);
  box-shadow: 0 45px 100px rgb(0 0 0 / 35%);
  transform: rotateX(4deg) rotateY(-5deg);
  transform-style: preserve-3d;
}

[dir="rtl"] .cutaway-window {
  transform: rotateX(4deg) rotateY(5deg);
}

.cutaway-topbar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.cutaway-topbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
}

.cutaway-topbar i:first-child {
  background: var(--violet);
}

.cutaway-topbar i:nth-child(2) {
  background: var(--cyan-dark);
}

.cutaway-topbar span {
  width: 120px;
  height: 8px;
  margin-inline-start: auto;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
}

.cutaway-sidebar {
  position: absolute;
  width: 84px;
  inset-block: 54px 0;
  inset-inline-start: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 19px;
  padding-top: 26px;
  border-inline-end: 1px solid var(--line);
  background: rgb(255 255 255 / 2%);
}

.cutaway-sidebar b,
.cutaway-sidebar span {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: rgb(255 255 255 / 7%);
}

.cutaway-sidebar b {
  background: linear-gradient(135deg, var(--violet), var(--indigo));
}

.cutaway-content {
  margin-inline-start: 84px;
  padding: 26px;
}

.cutaway-command {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(255 255 255 / 3%);
}

.cutaway-command span {
  width: 43%;
  height: 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
}

.cutaway-command b {
  width: 92px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--violet), var(--indigo));
}

.cutaway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 17px;
}

.cutaway-grid i {
  height: 100px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 20%, rgb(34 211 238 / 12%), transparent 36%),
    rgb(255 255 255 / 3%);
}

.cutaway-grid i:nth-child(2),
.cutaway-grid i:nth-child(5) {
  background:
    radial-gradient(circle at 30% 70%, rgb(124 58 237 / 16%), transparent 40%),
    rgb(255 255 255 / 3%);
}

.cutaway-table {
  display: grid;
  gap: 11px;
  margin-top: 17px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.cutaway-table span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(255 255 255 / 8%) 68%, transparent 68%);
}

.cutaway-float {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgb(34 211 238 / 25%);
  border-radius: 10px;
  background: rgb(5 7 18 / 80%);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .58rem;
  box-shadow: 0 15px 35px rgb(0 0 0 / 25%);
}

.cutaway-float-a {
  width: 64px;
  height: 38px;
  inset-block-start: 90px;
  inset-inline-end: -22px;
}

.cutaway-float-b {
  width: 52px;
  height: 52px;
  inset-block-end: 70px;
  inset-inline-start: -20px;
  border-color: rgb(124 58 237 / 30%);
  color: var(--violet-light);
}

.cutaway-float-c {
  width: 84px;
  height: 34px;
  inset-block-end: 24px;
  inset-inline-end: 28px;
}

.cutaway-axis {
  position: absolute;
  background: var(--line);
}

.cutaway-axis-x {
  height: 1px;
  inset-inline: -30px;
  inset-block-end: -22px;
}

.cutaway-axis-y {
  width: 1px;
  inset-block: -28px;
  inset-inline-start: -22px;
}

.blueprint-scene {
  padding: 120px 0 0;
  overflow: hidden;
  background:
    linear-gradient(rgb(34 211 238 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(34 211 238 / 4%) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgb(8 145 178 / 12%), transparent 35%),
    #07101a;
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.blueprint-scene > .blueprint-layout {
  padding-bottom: 140px;
}

.foundation-subscene {
  position: relative;
  border-top: 1px solid rgb(34 211 238 / 14%);
}

.foundation-subscene::before {
  position: absolute;
  z-index: 1;
  width: min(44%, 520px);
  height: 1px;
  inset-block-start: -1px;
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--cyan), rgb(124 58 237 / 44%), transparent);
  content: "";
}

[dir="rtl"] .foundation-subscene::before {
  background: linear-gradient(90deg, transparent, rgb(124 58 237 / 44%), var(--cyan));
}

.chapter-label-sub span {
  min-width: 36px;
  color: var(--cyan);
}

.chapter-label-sub b {
  color: #8f9bb2;
}

.blueprint-layout {
  display: grid;
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
  gap: 70px;
  align-items: start;
}

.scene-heading-inverse {
  position: sticky;
  top: 118px;
  margin: 0;
}

.blueprint-system {
  position: relative;
  display: grid;
  gap: 18px;
  padding-inline-start: 48px;
}

.blueprint-axis {
  position: absolute;
  width: 1px;
  inset-block: 0;
  inset-inline-start: 8px;
  background: linear-gradient(var(--cyan), rgb(34 211 238 / 8%));
}

.blueprint-axis span,
.blueprint-axis b {
  position: absolute;
  inset-inline-start: -7px;
  color: rgb(34 211 238 / 55%);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .1em;
  writing-mode: vertical-rl;
}

.blueprint-axis span {
  inset-block-start: 0;
}

.blueprint-axis b {
  inset-block-end: 0;
}

.blueprint-layer {
  position: relative;
  min-height: 156px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px;
  border: 1px solid rgb(34 211 238 / 13%);
  border-radius: 3px 20px 20px 3px;
  background: linear-gradient(100deg, rgb(34 211 238 / 5%), rgb(255 255 255 / 2%));
  box-shadow: inset 3px 0 0 rgb(34 211 238 / 34%);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
}

[dir="rtl"] .blueprint-layer {
  border-radius: 20px 3px 3px 20px;
  box-shadow: inset -3px 0 0 rgb(34 211 238 / 34%);
}

.blueprint-layer:hover {
  z-index: 2;
  border-color: rgb(34 211 238 / 36%);
  background: linear-gradient(100deg, rgb(34 211 238 / 10%), rgb(124 58 237 / 5%));
  transform: translateX(8px);
}

[dir="rtl"] .blueprint-layer:hover {
  transform: translateX(-8px);
}

.layer-code {
  position: absolute;
  inset-block-start: 11px;
  inset-inline-end: 15px;
  color: rgb(34 211 238 / 42%);
  font-family: var(--font-mono);
  font-size: .52rem;
}

.layer-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(34 211 238 / 22%);
  border-radius: 14px;
  color: var(--cyan);
}

.layer-icon svg,
.stage-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blueprint-layer h3 {
  margin: 0 0 7px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.blueprint-layer p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.layer-status {
  align-self: end;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .57rem;
  white-space: nowrap;
}

.layer-tenancy {
  margin-inline-start: 24px;
}

.layer-operations {
  margin-inline-start: 48px;
}

.layer-scheduling {
  margin-inline-start: 72px;
}

.file-scene {
  padding: 140px 0;
  background:
    radial-gradient(circle at 15% 15%, rgb(124 58 237 / 13%), transparent 30%),
    radial-gradient(circle at 90% 70%, rgb(34 211 238 / 9%), transparent 28%),
    #080a15;
}

.file-layout {
  display: grid;
  grid-template-columns: minmax(280px, .55fr) minmax(0, 1.45fr);
  gap: 64px;
  align-items: start;
}

.file-copy {
  position: sticky;
  top: 118px;
}

.file-copy h2 {
  margin: 17px 0 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.7rem);
  font-weight: 550;
  line-height: .96;
  letter-spacing: -.055em;
}

[dir="rtl"] .file-copy h2 {
  line-height: 1.15;
  letter-spacing: -.02em;
}

.file-copy > p {
  margin: 24px 0 0;
  color: var(--muted);
}

.file-development {
  margin-top: 38px;
  padding: 18px;
  border: 1px dashed rgb(194 122 22 / 40%);
  border-radius: 14px;
  background: rgb(194 122 22 / 5%);
}

.file-development span,
.file-development b {
  color: #e0a64e;
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .08em;
}

.file-development p {
  margin: 10px 0;
  color: #c7b48f;
  font-size: .78rem;
}

.file-development b {
  font-weight: 500;
}

.file-system {
  position: relative;
  min-height: 1180px;
  padding-top: 50px;
}

.file-object {
  position: sticky;
  z-index: 6;
  top: 132px;
  width: 88px;
  height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  margin-inline-start: -10px;
  border: 1px solid rgb(34 211 238 / 38%);
  border-radius: 12px 20px 20px 12px;
  background: linear-gradient(145deg, rgb(34 211 238 / 16%), rgb(124 58 237 / 12%)), #10182a;
  color: var(--cyan);
  box-shadow: 0 22px 50px rgb(0 0 0 / 32%), 0 0 36px rgb(34 211 238 / 10%);
}

.file-object svg {
  width: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.file-object b {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .58rem;
}

.file-fold {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  width: 22px;
  height: 22px;
  border-block-end: 1px solid rgb(34 211 238 / 38%);
  border-inline-start: 1px solid rgb(34 211 238 / 38%);
}

.file-flow-line {
  position: absolute;
  width: 2px;
  inset-block: 130px 120px;
  inset-inline-start: 33px;
  background: rgb(34 211 238 / 12%);
}

.file-flow-line span {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--cyan), var(--violet), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out);
}

.file-system.is-visible .file-flow-line span {
  transform: scaleY(1);
}

.file-stages {
  display: grid;
  gap: 24px;
  margin: -112px 0 0;
  padding: 0 0 0 130px;
  list-style: none;
}

[dir="rtl"] .file-stages {
  padding: 0 130px 0 0;
}

.file-stage {
  position: relative;
  min-height: 130px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgb(34 211 238 / 5%), transparent 50%),
    rgb(17 24 42 / 78%);
  opacity: .42;
  transform: translateY(20px);
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out),
    border-color .55s var(--ease-out);
}

.file-stage:nth-child(1) { transition-delay: 70ms; }
.file-stage:nth-child(2) { transition-delay: 140ms; }
.file-stage:nth-child(3) { transition-delay: 210ms; }
.file-stage:nth-child(4) { transition-delay: 280ms; }
.file-stage:nth-child(5) { transition-delay: 350ms; }
.file-stage:nth-child(6) { transition-delay: 420ms; }
.file-stage:nth-child(7) { transition-delay: 490ms; }

.file-system.is-visible .file-stage {
  opacity: 1;
  transform: translateY(0);
}

.file-stage:hover {
  border-color: rgb(34 211 238 / 34%);
}

.file-stage::before {
  content: "";
  position: absolute;
  width: 98px;
  height: 1px;
  inset-inline-start: -98px;
  inset-block-start: 50%;
  background: linear-gradient(90deg, rgb(34 211 238 / 15%), var(--cyan));
}

.file-stage::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  inset-inline-start: -102px;
  inset-block-start: calc(50% - 4px);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgb(34 211 238 / 70%);
}

.stage-index {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 14px;
  color: rgb(34 211 238 / 45%);
  font-family: var(--font-mono);
  font-size: .55rem;
}

.stage-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(34 211 238 / 22%);
  border-radius: 14px;
  color: var(--cyan);
}

.file-stage h3 {
  margin: 0 0 7px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.file-stage p {
  margin: 0;
  color: var(--muted);
  font-size: .79rem;
}

.storage-ports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0 0 130px;
}

[dir="rtl"] .storage-ports {
  margin: 28px 130px 0 0;
}

.storage-ports span {
  padding: 12px 8px;
  border: 1px solid rgb(167 139 250 / 20%);
  border-radius: 10px;
  background: rgb(124 58 237 / 5%);
  color: var(--violet-light);
  font-family: var(--font-mono);
  font-size: .55rem;
  text-align: center;
}

.intelligence-scene {
  padding: 130px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 50%, rgb(34 211 238 / 10%), transparent 28%),
    radial-gradient(circle at 80% 50%, rgb(124 58 237 / 14%), transparent 30%),
    #070914;
}

.scene-heading-centered h2 span {
  color: var(--dim);
  font-weight: 300;
}

.intelligence-boundary {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: center;
  gap: 22px;
}

.intelligence-system {
  position: relative;
  min-height: 570px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 2.5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.ai-infrastructure {
  background:
    radial-gradient(circle at 50% 38%, rgb(34 211 238 / 12%), transparent 26%),
    rgb(255 255 255 / 2%);
}

.copilot-product {
  background:
    radial-gradient(circle at 50% 38%, rgb(124 58 237 / 14%), transparent 28%),
    rgb(255 255 255 / 2%);
}

.system-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .55rem;
}

.system-meta b {
  color: var(--cyan);
  font-weight: 500;
}

.copilot-product .system-meta b {
  color: var(--violet-light);
}

.intelligence-core {
  position: relative;
  width: 250px;
  height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  margin: 38px auto 28px;
  border: 1px solid rgb(34 211 238 / 27%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(34 211 238 / 12%), transparent 66%);
  text-align: center;
}

.intelligence-halo {
  position: absolute;
  inset: 20px;
  border: 1px dashed rgb(34 211 238 / 24%);
  border-radius: 50%;
}

.intelligence-core strong {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 2.1rem;
}

.intelligence-core small {
  max-width: 190px;
  margin-top: 8px;
  color: var(--muted);
  font-size: .67rem;
}

.intelligence-nodes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intelligence-nodes li {
  padding: 8px 11px;
  border: 1px solid rgb(34 211 238 / 16%);
  border-radius: 999px;
  color: #b6ced4;
  font-size: .67rem;
}

.boundary-bridge {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .52rem;
  text-align: center;
}

.boundary-bridge span {
  width: 1px;
  height: 90px;
  background: linear-gradient(transparent, var(--violet), transparent);
}

.copilot-interface {
  max-width: 390px;
  min-height: 310px;
  margin: 44px auto 26px;
  padding: 18px;
  border: 1px solid rgb(167 139 250 / 22%);
  border-radius: 22px;
  background: rgb(7 9 20 / 74%);
  box-shadow: 0 30px 60px rgb(0 0 0 / 25%);
  transform: perspective(900px) rotateY(4deg);
}

[dir="rtl"] .copilot-interface {
  transform: perspective(900px) rotateY(-4deg);
}

.copilot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem;
}

.copilot-header i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 15px rgb(124 58 237 / 65%);
}

.copilot-header b {
  margin-inline-start: auto;
  color: var(--violet-light);
  font-family: var(--font-mono);
  font-size: .6rem;
}

.copilot-message {
  height: 54px;
  margin-top: 18px;
  border-radius: 14px;
}

.message-user {
  width: 70%;
  margin-inline-start: auto;
  background: rgb(255 255 255 / 7%);
}

.message-ai {
  display: grid;
  gap: 7px;
  align-content: center;
  padding: 12px 16px;
  border: 1px solid rgb(124 58 237 / 18%);
  background: rgb(124 58 237 / 8%);
}

.message-ai span {
  height: 5px;
  border-radius: 999px;
  background: rgb(167 139 250 / 22%);
}

.message-ai span:nth-child(2) {
  width: 76%;
}

.message-ai span:nth-child(3) {
  width: 48%;
}

.copilot-tools {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.copilot-tools i {
  padding: 7px 10px;
  border: 1px solid rgb(167 139 250 / 18%);
  border-radius: 8px;
  color: var(--violet-light);
  font-family: var(--font-mono);
  font-size: .53rem;
  font-style: normal;
}

.copilot-product h3 {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
}

.copilot-product > p {
  max-width: 430px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}

.product-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgb(124 58 237 / 10%), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 1.5%), transparent 220px),
    var(--canvas);
}

.product-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(124 149 201 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(124 149 201 / 4%) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 76%);
  pointer-events: none;
}

.product-ecosystem {
  position: relative;
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
}

.product-observatory-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
}

.ecosystem-spine {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr 10px auto 10px 1fr;
  align-items: center;
  gap: 12px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
}

.ecosystem-spine span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(34 211 238 / 45%));
}

.ecosystem-spine span:last-child {
  background: linear-gradient(90deg, rgb(34 211 238 / 45%), transparent);
}

.ecosystem-spine i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgb(34 211 238 / 60%);
}

.product-interaction-hint {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgb(34 211 238 / 17%);
  border-radius: 999px;
  background: rgb(34 211 238 / 4%);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .55rem;
  white-space: nowrap;
}

[dir="rtl"] .product-interaction-hint {
  font-family: var(--font-rtl);
}

.product-interaction-hint span {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgb(34 211 238 / 75%);
}

.product-interaction-hint b {
  font-weight: 500;
}

.product-chapters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
  perspective: 1400px;
}

.product-chapter {
  --product-rgb: 124 58 237;
  --product-accent: var(--violet-light);
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 6%), transparent 38%),
    radial-gradient(circle at 86% 10%, rgb(var(--product-rgb) / 17%), transparent 38%),
    rgb(8 12 26 / 86%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 24px 65px rgb(0 0 0 / 22%);
  cursor: pointer;
  outline: none;
  transform:
    perspective(1000px)
    rotateX(var(--card-tilt-x))
    rotateY(var(--card-tilt-y))
    translateZ(0);
  transform-style: preserve-3d;
  transition:
    opacity .35s var(--ease-out),
    transform .45s var(--ease-out),
    border-color .35s var(--ease-out),
    background .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
  will-change: transform;
}

.product-chapter::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 250px;
  aspect-ratio: 1;
  inset-block-start: -125px;
  inset-inline-end: -90px;
  border-radius: 50%;
  border: 1px solid rgb(var(--product-rgb) / 18%);
  box-shadow:
    0 0 0 34px rgb(var(--product-rgb) / 4%),
    0 0 0 72px rgb(var(--product-rgb) / 2%);
  opacity: .52;
  transition: opacity .4s var(--ease-out), transform .7s var(--ease-out);
  pointer-events: none;
}

.product-chapter::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, rgb(255 255 255 / 6%) 48%, transparent 68%);
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
}

.chapter-com {
  grid-column: span 5;
}

.chapter-helpdesk {
  --product-rgb: 34 211 238;
  --product-accent: var(--cyan);
  grid-column: span 7;
}

.chapter-crm {
  --product-rgb: 194 122 22;
  --product-accent: #dda04b;
  grid-column: span 7;
}

.chapter-cms {
  --product-rgb: 29 138 98;
  --product-accent: #5bc39a;
  grid-column: span 5;
}

.chapter-forms {
  --product-rgb: 34 211 238;
  --product-accent: var(--cyan);
  grid-column: span 5;
}

.chapter-copilots {
  --product-rgb: 167 139 250;
  --product-accent: var(--violet-light);
  grid-column: span 7;
}

.product-coordinate {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 17px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .55rem;
}

.product-card-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-emblem {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--product-rgb) / 28%);
  border-radius: 16px;
  background: rgb(var(--product-rgb) / 9%);
  color: var(--product-accent);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 0 30px rgb(var(--product-rgb) / 8%);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.product-logo {
  width: 32px;
  height: 32px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-logo .logo-frame {
  stroke-width: 1.6;
}

.product-logo .logo-panel,
.product-logo .logo-link {
  opacity: .72;
}

.product-logo .logo-signal {
  stroke: var(--ivory);
  opacity: .9;
}

.product-logo .logo-node {
  fill: currentColor;
  stroke: rgb(5 7 18 / 85%);
  stroke-width: .8;
  transform-box: fill-box;
  transform-origin: center;
}

.product-logo .logo-orbit {
  opacity: .58;
  transform-box: fill-box;
  transform-origin: center;
}

.product-emblem-copilots .logo-core {
  fill: rgb(var(--product-rgb) / 8%);
}

.product-emblem-finance {
  color: #e7b25f;
}

.product-emblem-ecommerce {
  color: var(--cyan);
}

.product-emblem-erp {
  color: var(--violet-light);
}

.product-live-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .48rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[dir="rtl"] .product-live-signal {
  font-family: var(--font-rtl);
  letter-spacing: 0;
  text-transform: none;
}

.product-live-signal i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--product-accent);
  box-shadow: 0 0 12px rgb(var(--product-rgb) / 70%);
}

.product-live-signal b {
  font-weight: 500;
}

.product-visual {
  position: relative;
  z-index: 2;
  height: 94px;
  margin: 22px 0 4px;
  overflow: hidden;
  border: 1px solid rgb(var(--product-rgb) / 14%);
  border-radius: 16px;
  background:
    linear-gradient(rgb(var(--product-rgb) / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--product-rgb) / 5%) 1px, transparent 1px),
    rgb(3 7 18 / 54%);
  background-size: 18px 18px;
  opacity: .64;
  transition: opacity .4s var(--ease-out), border-color .4s var(--ease-out), transform .45s var(--ease-out);
}

.product-visual > *,
.product-visual > * > * {
  box-sizing: border-box;
}

.com-template,
.com-router,
.com-channels,
.helpdesk-queue,
.helpdesk-agent,
.helpdesk-sla,
.crm-contact,
.crm-pipeline,
.crm-value,
.cms-languages,
.cms-canvas,
.cms-publish,
.cms-metrics,
.forms-schema,
.forms-builder,
.forms-output,
.copilot-thread,
.copilot-brain,
.copilot-actions {
  position: absolute;
}

.com-template {
  width: 68px;
  inset-block-start: 18px;
  inset-inline-start: 14px;
  display: grid;
  gap: 7px;
}

.com-template i {
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--product-rgb) / 26%);
}

.com-template i:nth-child(2) { width: 78%; }
.com-template i:nth-child(3) { width: 54%; }

.com-router {
  width: 29px;
  height: 29px;
  inset-block-start: 31px;
  inset-inline-start: 46%;
  border: 1px solid rgb(var(--product-rgb) / 48%);
  border-radius: 9px;
  background: rgb(var(--product-rgb) / 10%);
  box-shadow: 0 0 22px rgb(var(--product-rgb) / 18%);
  transform: translateX(-50%) rotate(45deg);
}

.com-router span,
.com-router b {
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(var(--product-rgb) / 55%);
  border-radius: 5px;
}

.com-router b {
  inset: 12px;
  background: var(--product-accent);
  border: 0;
  box-shadow: 0 0 10px rgb(var(--product-rgb) / 70%);
}

.com-channels {
  inset-block: 15px;
  inset-inline-end: 13px;
  display: grid;
  align-content: space-between;
}

.com-channels span {
  position: relative;
  width: 26px;
  height: 18px;
  border: 1px solid rgb(var(--product-rgb) / 34%);
  border-radius: 6px;
  background: rgb(5 10 23 / 80%);
}

.com-channel-mail::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgb(var(--product-rgb) / 55%);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}

.com-channel-chat::before {
  content: "";
  position: absolute;
  inset: 4px 5px;
  border: 1px solid rgb(var(--product-rgb) / 55%);
  border-radius: 4px;
}

.com-channel-bell::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  inset: 3px auto auto 8px;
  border: 1px solid rgb(var(--product-rgb) / 55%);
  border-radius: 8px 8px 4px 4px;
}

.com-route {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--product-rgb) / 70%));
  transform-origin: left center;
}

.com-route-a { width: 46px; inset: 47px auto auto 73px; }
.com-route-b { width: 62px; inset: 45px 32px auto auto; transform: rotate(-23deg); }
.com-route-c { width: 62px; inset: 48px 31px auto auto; transform: rotate(23deg); }

.helpdesk-queue {
  width: 43%;
  inset-block: 14px;
  inset-inline-start: 12px;
  display: grid;
  gap: 6px;
}

.helpdesk-queue span {
  position: relative;
  height: 18px;
  border: 1px solid rgb(var(--product-rgb) / 22%);
  border-radius: 6px;
  background: rgb(5 10 23 / 72%);
}

.helpdesk-queue i {
  position: absolute;
  width: 6px;
  height: 6px;
  inset-block-start: 5px;
  inset-inline-start: 6px;
  border-radius: 50%;
  background: rgb(var(--product-rgb) / 68%);
}

.helpdesk-queue b {
  position: absolute;
  height: 3px;
  inset-block-start: 7px;
  inset-inline: 18px 7px;
  border-radius: 999px;
  background: rgb(var(--product-rgb) / 22%);
}

.helpdesk-agent {
  width: 37px;
  height: 37px;
  inset: 27px auto auto 54%;
  border: 1px solid rgb(var(--product-rgb) / 42%);
  border-radius: 50%;
  background: rgb(var(--product-rgb) / 8%);
}

.helpdesk-agent span {
  position: absolute;
  width: 11px;
  height: 11px;
  inset: 7px auto auto 12px;
  border: 1px solid rgb(var(--product-rgb) / 62%);
  border-radius: 50%;
}

.helpdesk-agent i {
  position: absolute;
  width: 20px;
  height: 9px;
  inset: 21px auto auto 8px;
  border: 1px solid rgb(var(--product-rgb) / 62%);
  border-radius: 12px 12px 5px 5px;
}

.helpdesk-sla {
  width: 36px;
  height: 36px;
  inset: 28px 13px auto auto;
  border: 1px solid rgb(var(--product-rgb) / 34%);
  border-radius: 50%;
}

.helpdesk-sla span {
  position: absolute;
  inset: 5px;
  border: 2px solid rgb(var(--product-rgb) / 55%);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(32deg);
}

.helpdesk-sla b {
  position: absolute;
  width: 2px;
  height: 9px;
  inset: 8px auto auto 16px;
  border-radius: 2px;
  background: var(--product-accent);
  transform-origin: 50% 10px;
}

.helpdesk-flow,
.crm-flow,
.forms-flow,
.copilot-flow {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--product-rgb) / 75%), transparent);
}

.helpdesk-flow { inset: 50% 40% 0 43%; }

.crm-contact {
  width: 45px;
  height: 60px;
  inset: 16px auto auto 13px;
  border: 1px solid rgb(var(--product-rgb) / 28%);
  border-radius: 9px;
  background: rgb(5 10 23 / 72%);
}

.crm-contact span {
  position: absolute;
  width: 15px;
  height: 15px;
  inset: 8px auto auto 14px;
  border: 1px solid rgb(var(--product-rgb) / 58%);
  border-radius: 50%;
}

.crm-contact i,
.crm-contact b {
  position: absolute;
  height: 4px;
  inset-inline: 8px;
  border-radius: 999px;
  background: rgb(var(--product-rgb) / 25%);
}

.crm-contact i { inset-block-start: 31px; }
.crm-contact b { inset-block-start: 42px; inset-inline-end: 16px; }

.crm-pipeline {
  inset: 18px 12px auto 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.crm-pipeline span {
  position: relative;
  height: 51px;
  border: 1px solid rgb(var(--product-rgb) / 21%);
  border-radius: 7px;
  background: rgb(5 10 23 / 66%);
}

.crm-pipeline i {
  position: absolute;
  height: 7px;
  inset: auto 5px 6px;
  border-radius: 3px;
  background: rgb(var(--product-rgb) / 22%);
}

.crm-pipeline span:nth-child(2) i { height: 20px; }
.crm-pipeline span:nth-child(3) i { height: 34px; background: rgb(var(--product-rgb) / 42%); }

.crm-value {
  inset: auto 16px 7px auto;
  display: flex;
  align-items: end;
  gap: 3px;
}

.crm-value i {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--product-accent);
}

.crm-value i:nth-child(2) { height: 10px; }
.crm-value i:nth-child(3) { height: 15px; }
.crm-flow { width: 30px; inset: 48px auto auto 49px; }

.cms-languages {
  inset: 10px auto auto 12px;
  display: flex;
  gap: 4px;
}

.cms-languages span {
  padding: 2px 4px;
  border: 1px solid rgb(var(--product-rgb) / 25%);
  border-radius: 4px;
  color: rgb(220 245 236 / 65%);
  font-family: var(--font-mono);
  font-size: .38rem;
}

.cms-canvas {
  width: 57%;
  height: 54px;
  inset: 30px auto auto 12px;
  padding: 7px;
  border: 1px solid rgb(var(--product-rgb) / 26%);
  border-radius: 7px;
  background: rgb(5 10 23 / 76%);
}

.cms-canvas i {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgb(var(--product-rgb) / 24%);
}

.cms-canvas .cms-hero {
  height: 14px;
  margin: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(var(--product-rgb) / 42%), rgb(var(--product-rgb) / 12%));
}

.cms-canvas i:last-child { width: 62%; }

.cms-publish {
  width: 34px;
  height: 34px;
  inset: 15px 13px auto auto;
  border: 1px solid rgb(var(--product-rgb) / 32%);
  border-radius: 50%;
}

.cms-publish span {
  position: absolute;
  inset: 5px;
  border: 2px solid rgb(var(--product-rgb) / 54%);
  border-left-color: transparent;
  border-radius: 50%;
}

.cms-publish b {
  position: absolute;
  width: 9px;
  height: 6px;
  inset: 13px auto auto 12px;
  border-inline-end: 2px solid var(--product-accent);
  border-block-end: 2px solid var(--product-accent);
  transform: rotate(-45deg);
}

.cms-metrics {
  inset: auto 15px 12px auto;
  display: flex;
  align-items: end;
  gap: 4px;
}

.cms-metrics i {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: rgb(var(--product-rgb) / 35%);
}

.cms-metrics i:nth-child(2) { height: 15px; }
.cms-metrics i:nth-child(3) { height: 23px; background: var(--product-accent); }

.forms-schema {
  width: 48px;
  inset: 17px auto auto 12px;
  display: grid;
  gap: 8px;
}

.forms-schema span {
  height: 12px;
  border: 1px solid rgb(var(--product-rgb) / 28%);
  border-radius: 5px;
  background: rgb(var(--product-rgb) / 7%);
}

.forms-builder {
  height: 64px;
  inset: 14px 12px auto 70px;
  padding: 9px;
  border: 1px solid rgb(var(--product-rgb) / 28%);
  border-radius: 8px;
  background: rgb(5 10 23 / 72%);
}

.forms-builder i {
  display: block;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgb(var(--product-rgb) / 25%);
}

.forms-builder i:nth-child(2) { width: 78%; }

.forms-builder b {
  display: block;
  width: 32px;
  height: 10px;
  margin-inline-start: auto;
  border-radius: 4px;
  background: rgb(var(--product-rgb) / 45%);
}

.forms-output {
  width: 25px;
  height: 25px;
  inset: 35px 9px auto auto;
  border: 1px solid rgb(var(--product-rgb) / 36%);
  border-radius: 7px;
  background: rgb(5 10 23 / 88%);
}

.forms-output span,
.forms-output b {
  position: absolute;
  background: var(--product-accent);
}

.forms-output span { width: 10px; height: 2px; inset: 11px auto auto 7px; }
.forms-output b { width: 2px; height: 10px; inset: 7px auto auto 11px; }
.forms-flow { width: 25px; inset: 47px 28px auto auto; }

.copilot-thread {
  width: 40%;
  inset: 16px auto auto 12px;
}

.copilot-thread > span {
  display: block;
  height: 19px;
  border-radius: 8px;
}

.copilot-thread-user {
  width: 72%;
  margin-inline-start: auto;
  background: rgb(var(--product-rgb) / 16%);
}

.copilot-thread-ai {
  width: 90%;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgb(var(--product-rgb) / 25%);
  background: rgb(5 10 23 / 74%);
}

.copilot-thread-ai i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline-end: 3px;
  border-radius: 50%;
  background: var(--product-accent);
}

.copilot-brain {
  width: 40px;
  height: 40px;
  inset: 25px auto auto 49%;
  border: 1px solid rgb(var(--product-rgb) / 42%);
  border-radius: 50%;
  box-shadow: 0 0 22px rgb(var(--product-rgb) / 14%);
  transform: translateX(-50%);
}

.copilot-brain span,
.copilot-brain i,
.copilot-brain b {
  position: absolute;
  border: 1px solid rgb(var(--product-rgb) / 55%);
  border-radius: 50%;
}

.copilot-brain span { inset: 6px; }
.copilot-brain i { inset: 12px; }
.copilot-brain b { inset: 17px; background: var(--product-accent); border: 0; }

.copilot-actions {
  inset: 17px 11px auto auto;
  display: grid;
  gap: 6px;
}

.copilot-actions span {
  min-width: 34px;
  padding: 3px 5px;
  border: 1px solid rgb(var(--product-rgb) / 26%);
  border-radius: 5px;
  color: rgb(222 216 252 / 67%);
  font-family: var(--font-mono);
  font-size: .36rem;
  text-align: center;
}

.copilot-flow { width: 43px; inset: 47px 42px auto auto; }

.product-content {
  position: relative;
  z-index: 3;
  margin-top: 20px;
}

.product-status {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .56rem;
}

.product-content h3 {
  margin: 8px 0 10px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
  font-weight: 550;
  letter-spacing: -.035em;
}

.product-content p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.product-links {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 24px;
}

.product-links span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .5rem;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}

.product-chapter:focus-visible {
  border-color: var(--product-accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 0 3px rgb(var(--product-rgb) / 18%),
    0 34px 80px rgb(0 0 0 / 32%);
}

.product-chapter.is-active {
  z-index: 4;
  border-color: rgb(var(--product-rgb) / 42%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 42%),
    radial-gradient(circle at 82% 10%, rgb(var(--product-rgb) / 26%), transparent 42%),
    rgb(8 12 26 / 94%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 36px 90px rgb(0 0 0 / 36%),
    0 0 58px rgb(var(--product-rgb) / 11%);
  transform:
    perspective(1000px)
    rotateX(var(--card-tilt-x))
    rotateY(var(--card-tilt-y))
    translateY(-7px)
    scale(1.012);
}

.product-chapter.is-active::before {
  opacity: .9;
  transform: rotate(14deg) scale(1.12);
}

.product-chapter.is-active::after {
  animation: product-card-scan .9s var(--ease-out) both;
}

.product-chapter.is-active .product-emblem {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    0 0 34px rgb(var(--product-rgb) / 24%);
  transform: translateZ(26px) rotate(-4deg) scale(1.08);
}

.product-chapter.is-active .product-logo .logo-node {
  animation: product-logo-node 1.8s var(--logo-delay, 0s) var(--ease-out) infinite;
}

.product-chapter.is-active .product-logo .logo-node-b {
  --logo-delay: .35s;
}

.product-chapter.is-active .product-logo .logo-node-c {
  --logo-delay: .7s;
}

.product-chapter.is-active .product-logo .logo-signal {
  animation: product-logo-signal 2.2s var(--ease-smooth) infinite;
}

.product-chapter.is-active .product-emblem-communication .logo-link,
.product-chapter.is-active .product-emblem-crm .logo-link,
.product-chapter.is-active .product-emblem-erp .logo-link {
  animation: product-logo-link 1.9s var(--ease-smooth) infinite;
}

.product-chapter.is-active .product-emblem-copilots .logo-orbit-a {
  animation: product-logo-orbit 5s linear infinite;
}

.product-chapter.is-active .product-emblem-copilots .logo-orbit-b {
  animation: product-logo-orbit-reverse 6.5s linear infinite;
}

.product-chapter.is-active .product-live-signal {
  color: var(--product-accent);
}

.product-chapter.is-active .product-visual {
  border-color: rgb(var(--product-rgb) / 34%);
  opacity: 1;
  transform: translateZ(18px) scale(1.015);
}

.product-chapter.is-active .com-router {
  animation: com-router-pulse 2.4s var(--ease-out) infinite;
}

.product-chapter.is-active .com-route {
  animation: workflow-signal 2.2s var(--route-delay, 0s) var(--ease-smooth) infinite;
}

.product-chapter.is-active .com-route-b { --route-delay: .35s; }
.product-chapter.is-active .com-route-c { --route-delay: .7s; }

.product-chapter.is-active .com-channels span {
  animation: workflow-highlight 2.1s var(--channel-delay, 0s) var(--ease-out) infinite;
}

.product-chapter.is-active .com-channel-chat { --channel-delay: .35s; }
.product-chapter.is-active .com-channel-bell { --channel-delay: .7s; }

.product-chapter.is-active .helpdesk-queue span {
  animation: helpdesk-ticket 2.5s var(--ticket-delay, 0s) var(--ease-out) infinite;
}

.product-chapter.is-active .helpdesk-queue span:nth-child(2) { --ticket-delay: .35s; }
.product-chapter.is-active .helpdesk-queue span:nth-child(3) { --ticket-delay: .7s; }
.product-chapter.is-active .helpdesk-sla b { animation: sla-clock 3s linear infinite; }
.product-chapter.is-active .helpdesk-flow { animation: workflow-signal 2.2s var(--ease-smooth) infinite; }

.product-chapter.is-active .crm-pipeline span i {
  animation: crm-stage-grow 2.8s var(--stage-delay, 0s) var(--ease-out) infinite;
  transform-origin: center bottom;
}

.product-chapter.is-active .crm-pipeline span:nth-child(2) i { --stage-delay: .35s; }
.product-chapter.is-active .crm-pipeline span:nth-child(3) i { --stage-delay: .7s; }
.product-chapter.is-active .crm-flow { animation: workflow-signal 2.2s var(--ease-smooth) infinite; }
.product-chapter.is-active .crm-value i { animation: crm-value-rise 2.2s var(--stage-delay, 0s) var(--ease-out) infinite; }
.product-chapter.is-active .crm-value i:nth-child(2) { --stage-delay: .25s; }
.product-chapter.is-active .crm-value i:nth-child(3) { --stage-delay: .5s; }

.product-chapter.is-active .cms-publish span { animation: publish-spin 3.2s linear infinite; }
.product-chapter.is-active .cms-publish b { animation: workflow-highlight 2s var(--ease-out) infinite; }
.product-chapter.is-active .cms-metrics i { animation: crm-value-rise 2.5s var(--stage-delay, 0s) var(--ease-out) infinite; }
.product-chapter.is-active .cms-metrics i:nth-child(2) { --stage-delay: .3s; }
.product-chapter.is-active .cms-metrics i:nth-child(3) { --stage-delay: .6s; }
.product-chapter.is-active .cms-languages span { animation: workflow-highlight 2.4s var(--channel-delay, 0s) var(--ease-out) infinite; }
.product-chapter.is-active .cms-languages span:nth-child(2) { --channel-delay: .4s; }
.product-chapter.is-active .cms-languages span:nth-child(3) { --channel-delay: .8s; }

.product-chapter.is-active .forms-schema span {
  animation: forms-field 2.4s var(--field-delay, 0s) var(--ease-out) infinite;
}

.product-chapter.is-active .forms-schema span:nth-child(2) { --field-delay: .3s; }
.product-chapter.is-active .forms-schema span:nth-child(3) { --field-delay: .6s; }
.product-chapter.is-active .forms-flow { animation: workflow-signal 2.2s var(--ease-smooth) infinite; }
.product-chapter.is-active .forms-output { animation: workflow-highlight 2s .7s var(--ease-out) infinite; }

.product-chapter.is-active .copilot-thread-ai i {
  animation: copilot-thinking 1.4s var(--thinking-delay, 0s) var(--ease-out) infinite;
}

.product-chapter.is-active .copilot-thread-ai i:nth-child(2) { --thinking-delay: .18s; }
.product-chapter.is-active .copilot-thread-ai i:nth-child(3) { --thinking-delay: .36s; }
.product-chapter.is-active .copilot-brain span { animation: copilot-orbit 4s linear infinite; }
.product-chapter.is-active .copilot-brain i { animation: copilot-orbit-reverse 3s linear infinite; }
.product-chapter.is-active .copilot-actions span { animation: workflow-highlight 2.3s var(--channel-delay, 0s) var(--ease-out) infinite; }
.product-chapter.is-active .copilot-actions span:nth-child(2) { --channel-delay: .4s; }
.product-chapter.is-active .copilot-actions span:nth-child(3) { --channel-delay: .8s; }
.product-chapter.is-active .copilot-flow { animation: workflow-signal 2s var(--ease-smooth) infinite; }

.product-chapter.is-active .product-links span {
  border-color: rgb(var(--product-rgb) / 26%);
  background: rgb(var(--product-rgb) / 7%);
  color: var(--product-accent);
  transform: translateY(-2px);
}

.product-ecosystem.has-active .product-chapter:not(.is-active) {
  opacity: .68;
}

@keyframes product-card-scan {
  from { opacity: 0; transform: translateX(-110%); }
  35% { opacity: .55; }
  to { opacity: 0; transform: translateX(110%); }
}

@keyframes workflow-signal {
  0%, 100% { opacity: .18; filter: brightness(.7); }
  50% { opacity: 1; filter: brightness(1.45); }
}

@keyframes workflow-highlight {
  0%, 100% { opacity: .58; box-shadow: none; }
  50% { opacity: 1; box-shadow: 0 0 14px rgb(var(--product-rgb) / 28%); }
}

@keyframes com-router-pulse {
  0%, 100% { box-shadow: 0 0 14px rgb(var(--product-rgb) / 12%); transform: translateX(-50%) rotate(45deg) scale(.94); }
  50% { box-shadow: 0 0 28px rgb(var(--product-rgb) / 34%); transform: translateX(-50%) rotate(45deg) scale(1.06); }
}

@keyframes helpdesk-ticket {
  0%, 100% { border-color: rgb(var(--product-rgb) / 20%); transform: translateX(0); }
  50% { border-color: rgb(var(--product-rgb) / 52%); transform: translateX(3px); }
}

[dir="rtl"] .product-chapter.is-active .helpdesk-queue span {
  animation-name: helpdesk-ticket-rtl;
}

@keyframes helpdesk-ticket-rtl {
  0%, 100% { border-color: rgb(var(--product-rgb) / 20%); transform: translateX(0); }
  50% { border-color: rgb(var(--product-rgb) / 52%); transform: translateX(-3px); }
}

@keyframes sla-clock {
  to { transform: rotate(360deg); }
}

@keyframes crm-stage-grow {
  0%, 100% { opacity: .5; transform: scaleY(.72); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes crm-value-rise {
  0%, 100% { opacity: .55; transform: scaleY(.72); }
  50% { opacity: 1; transform: scaleY(1.12); }
}

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

@keyframes forms-field {
  0%, 100% { opacity: .5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

[dir="rtl"] .product-chapter.is-active .forms-schema span {
  animation-name: forms-field-rtl;
}

@keyframes forms-field-rtl {
  0%, 100% { opacity: .5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-4px); }
}

@keyframes copilot-thinking {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes copilot-orbit {
  to { transform: rotate(360deg); }
}

@keyframes copilot-orbit-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes product-logo-node {
  0%, 100% { opacity: .55; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes product-logo-signal {
  0%, 100% { opacity: .52; }
  50% { opacity: 1; }
}

@keyframes product-logo-link {
  0%, 100% { opacity: .25; }
  50% { opacity: .95; }
}

@keyframes product-logo-orbit {
  to { transform: rotate(360deg); }
}

@keyframes product-logo-orbit-reverse {
  to { transform: rotate(-360deg); }
}

.future-product-scene {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgb(167 139 250 / 15%);
  background:
    radial-gradient(circle at 12% 20%, rgb(34 211 238 / 10%), transparent 28%),
    radial-gradient(circle at 88% 78%, rgb(124 58 237 / 18%), transparent 34%),
    linear-gradient(145deg, #07101a, #080a17 52%, #0b0d20);
}

.future-product-scene::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(168 178 199 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(168 178 199 / 3.5%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
  content: "";
}

.future-product-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.future-product-card {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgb(168 178 199 / 15%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 10%, var(--future-glow, rgb(124 58 237 / 16%)), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)),
    rgb(9 14 29 / 82%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 30px 80px rgb(0 0 0 / 22%);
  backdrop-filter: blur(16px);
  transition:
    border-color .28s var(--ease-out),
    box-shadow .28s var(--ease-out),
    transform .28s var(--ease-out);
}

.future-finance,
.future-erp {
  grid-column: span 4;
}

.future-commerce {
  grid-column: span 4;
  --future-glow: rgb(34 211 238 / 17%);
  transform: translateY(-22px);
}

.future-erp {
  --future-glow: rgb(194 122 22 / 15%);
}

.future-coordinate {
  position: absolute;
  z-index: 2;
  inset-block-start: 22px;
  inset-inline-end: 24px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .1em;
}

.future-product-orbit {
  position: absolute;
  width: 190px;
  height: 190px;
  inset-block-start: -82px;
  inset-inline-end: -70px;
  border: 1px solid rgb(167 139 250 / 14%);
  border-radius: 50%;
}

.future-product-orbit span {
  position: absolute;
  inset: 26px;
  border: 1px dashed rgb(34 211 238 / 14%);
  border-radius: 50%;
}

.future-product-orbit i {
  position: absolute;
  width: 8px;
  height: 8px;
  inset-block-end: 30px;
  inset-inline-start: 26px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

.future-product-card .product-emblem {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  border-radius: 18px;
}

.future-commerce .product-emblem {
  border-color: rgb(34 211 238 / 25%);
  background: rgb(34 211 238 / 8%);
  color: var(--cyan);
}

.future-erp .product-emblem {
  border-color: rgb(194 122 22 / 26%);
  background: rgb(194 122 22 / 8%);
  color: #dda04b;
}

.future-product-card .product-content {
  position: relative;
  z-index: 1;
  margin-top: 74px;
}

.future-product-card .product-content h3 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}

.future-product-card .product-content p {
  font-size: .9rem;
  line-height: 1.75;
}

.future-product-card .product-links {
  position: relative;
  z-index: 1;
}

.horizon-scene {
  padding: 130px 0 160px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, #060813 0%, #0a0e1c 58%, #11172a 100%);
}

.horizon-scene::after {
  content: "";
  position: absolute;
  width: 120vw;
  height: 55vw;
  inset-inline-start: -10vw;
  inset-block-end: -45vw;
  border: 1px solid rgb(124 58 237 / 22%);
  border-radius: 50%;
  box-shadow: 0 -18px 80px rgb(79 70 229 / 14%);
}

.development-horizon {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  perspective: 1200px;
}

.horizon-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
  gap: 40px;
  padding: 30px 34px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 2.5%);
  transform-origin: center bottom;
}

.horizon-now {
  border-radius: 20px;
  transform: scale(1);
}

.horizon-active {
  margin-inline: 5%;
  border-radius: 18px;
  opacity: .83;
  transform: scale(.94);
}

.horizon-later {
  margin-inline: 11%;
  border-style: dashed;
  border-radius: 16px;
  opacity: .62;
  transform: scale(.87);
}

.horizon-depth {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 16px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .52rem;
}

.horizon-band b {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .57rem;
  font-weight: 500;
}

.horizon-active b {
  color: var(--violet-light);
}

.horizon-later b {
  color: #78a9db;
}

.horizon-band h3 {
  margin: 8px 0 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.horizon-band ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0;
  padding-inline-start: 20px;
  color: var(--muted);
  font-size: .78rem;
}

.invitation-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 0;
  border-top: 1px solid rgb(167 139 250 / 15%);
  background:
    radial-gradient(circle at 18% 20%, rgb(124 58 237 / 18%), transparent 31%),
    radial-gradient(circle at 84% 72%, rgb(34 211 238 / 12%), transparent 34%),
    linear-gradient(145deg, #080b19 0%, #050712 48%, #090c1b 100%);
  color: var(--text);
}

.invitation-scene::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(168 178 199 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(168 178 199 / 4%) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  content: "";
}

.invitation-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.invitation-orbit {
  position: absolute;
  border: 1px solid rgb(34 211 238 / 14%);
  border-radius: 50%;
}

.invitation-orbit::before,
.invitation-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.invitation-orbit::before {
  inset: 10%;
  border: 1px dashed rgb(167 139 250 / 15%);
}

.invitation-orbit::after {
  width: 8px;
  height: 8px;
  inset-block-start: 14%;
  inset-inline-end: 20%;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan);
}

.invitation-orbit-a {
  width: 520px;
  height: 520px;
  inset-block-start: -250px;
  inset-inline-end: -130px;
}

.invitation-orbit-b {
  width: 360px;
  height: 360px;
  inset-block-end: -220px;
  inset-inline-start: -90px;
  border-color: rgb(167 139 250 / 14%);
}

.invitation-beam {
  position: absolute;
  width: 42%;
  height: 520px;
  inset-block-start: 8%;
  inset-inline-start: 30%;
  background: linear-gradient(115deg, transparent 30%, rgb(124 58 237 / 9%), rgb(34 211 238 / 5%), transparent 70%);
  filter: blur(28px);
  transform: rotate(-12deg);
}

.invitation-layout {
  position: relative;
}

.invitation-header {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  margin-bottom: 54px;
}

.invitation-mark {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
}

.invitation-mark-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(34 211 238 / 32%);
  border-radius: 32px;
  box-shadow:
    inset 0 0 32px rgb(34 211 238 / 6%),
    0 0 45px rgb(124 58 237 / 15%);
  transform: rotate(45deg);
}

.invitation-mark-pulse {
  position: absolute;
  width: 9px;
  height: 9px;
  inset-block-start: 2px;
  inset-inline-end: 20px;
  border: 2px solid var(--canvas);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

.invitation-mark img {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%);
}

.invitation-heading {
  min-width: 0;
}

.invitation-chapter-label {
  color: #929db4;
}

.invitation-chapter-label i {
  background: linear-gradient(90deg, var(--cyan), rgb(167 139 250 / 45%));
}

.invitation-chapter-label span {
  color: var(--cyan);
}

.invitation-kicker,
.access-label {
  display: block;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.invitation-layout h2 {
  max-width: 900px;
  margin: 12px 0 0;
  background: linear-gradient(110deg, #fff 8%, #d8d3ff 46%, #9cecf5 92%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

[dir="rtl"] .invitation-layout h2 {
  line-height: 1.3;
  letter-spacing: 0;
}

.invitation-coordinate {
  min-width: 118px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
}

.invitation-coordinate > span {
  grid-row: 1 / 3;
  color: rgb(231 234 242 / 22%);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
}

.invitation-coordinate i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}

.invitation-coordinate small {
  font-size: .52rem;
  letter-spacing: .12em;
}

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

.manifest-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(168 178 199 / 14%);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)),
    rgb(11 16 32 / 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 28px 70px rgb(0 0 0 / 20%);
  backdrop-filter: blur(18px) saturate(125%);
  transition:
    border-color .28s var(--ease-out),
    box-shadow .28s var(--ease-out),
    transform .28s var(--ease-out);
}

.manifest-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgb(34 211 238 / 8%), transparent 34%, transparent 68%, rgb(124 58 237 / 10%));
  pointer-events: none;
  content: "";
}

.manifest-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #c3cada;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.78;
}

.manifest-index {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 22px;
  color: rgb(168 178 199 / 32%);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
}

.manifest-glyph {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 46px;
  border: 1px solid rgb(34 211 238 / 22%);
  border-radius: 13px;
  background: rgb(34 211 238 / 6%);
  color: var(--cyan);
}

.manifest-glyph svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.manifest-belief,
.manifest-principle {
  grid-column: span 3;
  min-height: 310px;
  padding: 24px;
}

.manifest-principle {
  margin-top: 44px;
}

.manifest-quote {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(36px, 5vw, 72px);
  border-color: rgb(167 139 250 / 22%);
  background:
    radial-gradient(circle at 70% 12%, rgb(34 211 238 / 12%), transparent 28%),
    radial-gradient(circle at 10% 90%, rgb(124 58 237 / 22%), transparent 40%),
    linear-gradient(145deg, rgb(20 26 51 / 92%), rgb(9 12 28 / 86%));
}

.manifest-quote::after {
  position: absolute;
  width: 260px;
  height: 260px;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  border: 1px solid rgb(34 211 238 / 10%);
  border-radius: 50%;
  box-shadow:
    0 0 0 46px rgb(124 58 237 / 4%),
    0 0 0 92px rgb(34 211 238 / 3%);
  content: "";
  transform: translate(-50%, -50%);
}

[dir="rtl"] .manifest-quote::after {
  transform: translate(50%, -50%);
}

.manifest-quote figcaption {
  position: relative;
  z-index: 1;
  max-width: 54ch;
  margin-bottom: 26px;
  color: #929db4;
  font-size: .88rem;
  line-height: 1.7;
}

.manifest-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 3.45rem);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -.025em;
  text-wrap: balance;
  white-space: pre-line;
}

[dir="rtl"] .manifest-card p {
  line-height: 1.95;
}

[dir="rtl"] .manifest-quote blockquote {
  line-height: 1.9;
  letter-spacing: 0;
}

.quote-signal,
.quote-horizon {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.quote-signal {
  width: 150px;
  margin-bottom: 38px;
}

.quote-horizon {
  width: min(100%, 360px);
  margin-top: 42px;
}

.quote-signal span,
.quote-horizon span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(34 211 238 / 55%));
}

.quote-signal span:last-child,
.quote-horizon span:last-child {
  background: linear-gradient(90deg, rgb(167 139 250 / 55%), transparent);
}

.quote-signal i,
.quote-horizon i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

.manifest-philosophy {
  grid-column: span 3;
  align-self: end;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background:
    linear-gradient(160deg, rgb(124 58 237 / 12%), transparent 55%),
    rgb(11 16 32 / 76%);
}

.manifest-launch {
  grid-column: span 3;
  min-height: 330px;
  padding: 28px;
}

.launch-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 62px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
}

.launch-status span {
  white-space: nowrap;
}

.launch-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.launch-status svg {
  width: 92px;
  fill: none;
  stroke: rgb(167 139 250 / 55%);
  stroke-width: 1.2;
}

.manifest-access {
  grid-column: 1 / -1;
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 44px;
  padding: 34px;
  border-color: rgb(34 211 238 / 22%);
  background:
    linear-gradient(120deg, rgb(14 116 144 / 18%), transparent 38%),
    linear-gradient(300deg, rgb(124 58 237 / 18%), transparent 42%),
    rgb(13 19 38 / 86%);
}

.access-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  inset-block-start: 50%;
  inset-inline-end: -90px;
  border-radius: 50%;
  background: rgb(34 211 238 / 11%);
  filter: blur(48px);
  transform: translateY(-50%);
}

.access-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.access-copy p {
  margin-top: 16px;
  color: #e7eaf2;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 600;
}

.invitation-actions {
  position: relative;
  z-index: 1;
  min-width: 190px;
  display: grid;
  gap: 12px;
  margin: 0;
}

.invitation-actions .signal-button-ghost {
  border-color: rgb(168 178 199 / 22%);
  background: rgb(255 255 255 / 3%);
  color: var(--text);
}

.js .invitation-layout:not(.is-visible) .manifest-card {
  opacity: 0;
  transform: translateY(18px) scale(.985);
}

.js .invitation-layout.is-visible .manifest-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .55s var(--ease-out),
    border-color .28s var(--ease-out),
    box-shadow .28s var(--ease-out),
    transform .55s var(--ease-out);
}

.js .invitation-layout.is-visible .manifest-principle {
  transition-delay: .05s;
}

.js .invitation-layout.is-visible .manifest-quote {
  transition-delay: .1s;
}

.js .invitation-layout.is-visible .manifest-philosophy {
  transition-delay: .15s;
}

.js .invitation-layout.is-visible .manifest-launch {
  transition-delay: .2s;
}

.js .invitation-layout.is-visible .manifest-access {
  transition-delay: .25s;
}

.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}

.footer-layout {
  min-height: 160px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 40px;
}

.footer-layout strong {
  color: var(--ivory);
  font-family: var(--font-display);
}

.footer-layout p {
  max-width: 520px;
  margin: 5px 0 0;
  color: var(--dim);
  font-size: .76rem;
}

.footer-layout > p {
  margin: 0;
}

.footer-layout > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .57rem;
}

.footer-layout .footer-disclaimer {
  grid-column: 1 / -1;
  max-width: none;
  margin: -18px 0 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.noscript-message {
  position: fixed;
  z-index: 90;
  inset-inline: 18px;
  inset-block-end: 18px;
  padding: 13px 16px;
  border: 1px solid rgb(194 122 22 / 38%);
  border-radius: 11px;
  background: #211708;
  color: #f0c479;
  font-size: .8rem;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

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

.js .architecture-stage:not(.is-visible) .architecture-frame {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) + 24px), 0)
    rotateX(calc(5deg + var(--hero-tilt-x)))
    rotateY(calc(-7deg + var(--hero-tilt-y)))
    scale(.965);
}

[dir="rtl"].js .architecture-stage:not(.is-visible) .architecture-frame {
  transform:
    translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) + 24px), 0)
    rotateX(calc(5deg + var(--hero-tilt-x)))
    rotateY(calc(7deg + var(--hero-tilt-y)))
    scale(.965);
}

.js .architecture-stage.is-visible .architecture-frame {
  opacity: 1;
  filter: none;
}

.js .architecture-stage:not(.is-visible) .architecture-core,
.js .architecture-stage:not(.is-visible) .architecture-node,
.js .architecture-stage:not(.is-visible) .architecture-status {
  opacity: 0;
}

.js .architecture-stage:not(.is-visible) .architecture-core {
  transform: translate(-50%, -42%) translateZ(64px) scale(.72);
}

.js .architecture-stage:not(.is-visible) .architecture-node {
  transform: translateZ(28px) translateY(16px) scale(.92);
}

.js .architecture-stage.is-visible .architecture-core,
.js .architecture-stage.is-visible .architecture-node,
.js .architecture-stage.is-visible .architecture-status {
  opacity: 1;
  transition:
    opacity .65s var(--ease-out),
    transform .8s var(--ease-out),
    border-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}

.js .architecture-stage.is-visible .architecture-core {
  transition-delay: .14s;
}

.js .architecture-stage.is-visible .node-experience {
  transition-delay: .26s;
}

.js .architecture-stage.is-visible .node-foundation {
  transition-delay: .34s;
}

.js .architecture-stage.is-visible .node-services {
  transition-delay: .42s;
}

.js .architecture-stage.is-visible .node-alpha {
  transition-delay: .5s;
}

.js .architecture-stage.is-visible .node-future {
  transition-delay: .58s;
}

.js .architecture-stage.is-visible .architecture-status {
  transition-delay: .66s;
}

.js .architecture-stage:not(.is-visible) .link-line,
.js .architecture-stage:not(.is-visible) .link-ring {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
}

.js .architecture-stage.is-visible .link-line,
.js .architecture-stage.is-visible .link-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.45s .22s var(--ease-out);
}

.js .architecture-stage.is-visible .architecture-frame::after {
  animation: architecture-scan 1.4s .25s var(--ease-out) both;
}

.js .architecture-stage.is-visible .architecture-aurora {
  animation: architecture-breathe 8s 1.2s var(--ease-smooth) infinite alternate;
}

.js .architecture-stage.is-visible .core-pulse {
  animation: core-pulse 3.4s 1s var(--ease-out) infinite;
}

.js .architecture-stage.is-visible .core-orbit-a {
  animation: orbit-spin 18s linear infinite;
}

.js .architecture-stage.is-visible .core-orbit-b {
  animation: orbit-spin-reverse 26s linear infinite;
}

.js .architecture-stage.is-visible .link-ring {
  animation: orbit-spin 34s linear infinite;
  transform-origin: 360px 340px;
}

.js .architecture-stage.is-visible .link-ring-outer {
  animation: orbit-spin-reverse 46s linear infinite;
}

.js .architecture-stage.is-visible .signal-particle-a {
  animation: signal-path-a 7s 1.2s var(--ease-smooth) infinite;
}

.js .architecture-stage.is-visible .signal-particle-b {
  animation: signal-path-b 8.5s 2.2s var(--ease-smooth) infinite;
}

[data-depth] {
  transition: transform .35s var(--ease-out);
}

@keyframes architecture-scan {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes architecture-breathe {
  from { opacity: .68; transform: translate(-53%, -48%) scale(.92); }
  to { opacity: .96; transform: translate(-47%, -52%) scale(1.08); }
}

@keyframes core-pulse {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50% { opacity: .85; transform: scale(1.08); }
}

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

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

@keyframes signal-path-a {
  0%, 8% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: 1; }
  54% { opacity: 1; transform: translate(192px, -182px); }
  62%, 100% { opacity: 0; transform: translate(192px, -182px); }
}

@keyframes signal-path-b {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  22% { opacity: 1; }
  56% { opacity: 1; transform: translate(-190px, 186px); }
  66%, 100% { opacity: 0; transform: translate(-190px, 186px); }
}

@keyframes scroll-cue {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}

@media (max-width: 1100px) {
  .primary-nav {
    gap: 0;
  }

  .primary-nav a {
    padding-inline: 8px;
  }

  .primary-nav a::before,
  .brand-copy small {
    display: none;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 850px;
  }

  .architecture-stage {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .experience-spread {
    grid-template-columns: 1fr 1.3fr;
  }

  .experience-theme {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .blueprint-layout,
  .file-layout {
    grid-template-columns: 1fr;
  }

  .scene-heading-inverse,
  .file-copy {
    position: static;
    max-width: 760px;
  }

  .file-system {
    min-height: auto;
  }

  .intelligence-boundary {
    grid-template-columns: 1fr;
  }

  .boundary-bridge {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .boundary-bridge span {
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--violet));
  }

  .boundary-bridge span:last-child {
    background: linear-gradient(90deg, var(--violet), transparent);
  }

  .invitation-header {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
  }

  .invitation-mark {
    width: 88px;
    height: 88px;
  }

  .invitation-mark img {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .invitation-coordinate {
    display: none;
  }

  .invitation-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .manifest-belief,
  .manifest-principle,
  .manifest-philosophy,
  .manifest-launch {
    grid-column: span 3;
  }

  .manifest-principle {
    margin-top: 0;
  }

  .manifest-quote,
  .manifest-access {
    grid-column: 1 / -1;
  }

  .manifest-quote {
    grid-row: auto;
    min-height: 460px;
  }
}

@media (max-width: 820px) {
  .shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .header-inner {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    padding-block: 8px;
  }

  .brand {
    min-width: 0;
    overflow: hidden;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-toggle {
    display: block;
    margin: 0;
  }

  .header-actions {
    order: initial;
  }

  .text-action {
    display: none;
  }

  .primary-nav {
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgb(11 16 32 / 96%);
    box-shadow: 0 24px 50px rgb(0 0 0 / 34%);
  }

  .primary-nav.is-open {
    display: grid;
  }

  .primary-nav a {
    min-height: 44px;
    padding-inline: 12px;
  }

  .primary-nav a::after {
    inset-inline-start: 12px;
    inset-inline-end: auto;
    inset-block: 9px;
    width: 2px;
    height: auto;
    transform: scaleY(0);
  }

  [dir="rtl"] .primary-nav a::after {
    inset-inline-start: auto;
    inset-inline-end: 12px;
  }

  .primary-nav a:hover::after,
  .primary-nav a.is-active::after,
  .primary-nav a:focus-visible::after {
    transform: scaleY(1);
  }

  .hero-scene {
    min-height: auto;
    padding-top: 130px;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 12vw, 5rem);
  }

  [dir="rtl"] .hero-copy h1 {
    max-width: 13ch;
    font-size: clamp(2.8rem, 10.5vw, 4.6rem);
    line-height: 1.2;
  }

  .architecture-frame {
    min-height: 650px;
    transform: none;
  }

  [dir="rtl"] .architecture-frame {
    transform: none;
  }

  .architecture-node {
    width: 190px;
    min-height: 106px;
    padding: 14px;
  }

  .architecture-node-wide {
    width: 225px;
  }

  .node-experience {
    inset-block-start: 68px;
    inset-inline-start: 28px;
  }

  .node-foundation {
    inset-block-start: 58px;
    inset-inline-end: 20px;
  }

  .node-services {
    inset-block-start: 256px;
    inset-inline-end: 8px;
  }

  .node-alpha {
    inset-block-end: 42px;
    inset-inline-start: 18px;
  }

  .node-future {
    inset-block-end: 38px;
    inset-inline-end: 25px;
  }

  .architecture-core {
    width: 154px;
    height: 154px;
  }

  .manuscript-scene,
  .blueprint-scene,
  .file-scene,
  .intelligence-scene,
  .product-scene,
  .horizon-scene {
    padding-block: 92px;
  }

  .experience-spread {
    grid-template-columns: 1fr;
  }

  .shell-cutaway {
    order: -1;
  }

  .experience-column {
    min-height: auto;
  }

  .cutaway-window,
  [dir="rtl"] .cutaway-window {
    min-height: 480px;
    transform: none;
  }

  .blueprint-system {
    padding-inline-start: 34px;
  }

  .blueprint-layer {
    grid-template-columns: 46px 1fr;
  }

  .layer-status {
    grid-column: 2;
  }

  .layer-tenancy,
  .layer-operations,
  .layer-scheduling {
    margin-inline-start: 0;
  }

  .file-object {
    display: none;
  }

  .file-flow-line {
    inset-inline-start: 17px;
  }

  .file-stages {
    margin-top: 0;
    padding-inline-start: 74px;
  }

  [dir="rtl"] .file-stages {
    padding: 0 74px 0 0;
  }

  .file-stage::before {
    width: 42px;
    inset-inline-start: -42px;
  }

  .file-stage::after {
    inset-inline-start: -46px;
  }

  .storage-ports,
  [dir="rtl"] .storage-ports {
    margin-inline-start: 74px;
  }

  .product-chapters {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-observatory-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-interaction-hint {
    justify-self: center;
  }

  .product-chapter,
  .chapter-com,
  .chapter-helpdesk,
  .chapter-crm,
  .chapter-cms,
  .chapter-forms,
  .chapter-copilots {
    grid-column: auto;
  }

  .future-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .future-finance,
  .future-commerce,
  .future-erp {
    grid-column: auto;
    min-height: 390px;
    transform: none;
  }

  .future-erp {
    grid-column: 1 / -1;
  }

  .horizon-band {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .horizon-band ul {
    grid-template-columns: 1fr;
  }

  .horizon-active,
  .horizon-later {
    margin-inline: 0;
    transform: none;
  }

  .invitation-scene {
    padding: 96px 0;
  }

  .invitation-header {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 36px;
  }

  .invitation-mark {
    width: 72px;
    height: 72px;
  }

  .invitation-mark-ring {
    border-radius: 24px;
  }

  .invitation-mark img {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .invitation-layout h2 {
    font-size: clamp(2.35rem, 9vw, 4rem);
  }

  .invitation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manifest-belief,
  .manifest-principle,
  .manifest-philosophy,
  .manifest-launch {
    grid-column: span 1;
    min-height: 280px;
  }

  .manifest-quote,
  .manifest-access {
    grid-column: 1 / -1;
  }

  .manifest-access {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .invitation-actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .footer-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 40px;
  }

  .footer-layout .footer-disclaimer {
    grid-column: auto;
    margin: 16px 0 0;
    text-align: start;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(calc(100% - 24px), var(--shell));
  }

  .brand-copy small {
    display: none;
  }

  .header-inner {
    gap: 10px;
  }

  .brand-symbol {
    width: 40px;
    height: 40px;
  }

  .brand-copy strong {
    font-size: .88rem;
  }

  [dir="rtl"] .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.55rem, 11.5vw, 3.65rem);
    line-height: 1.24;
    overflow-wrap: anywhere;
  }

  .hero-actions,
  .invitation-actions {
    display: grid;
  }

  .signal-button {
    width: 100%;
  }

  .architecture-frame {
    min-height: 0;
    display: grid;
    gap: 12px;
    padding: 76px 12px 18px;
  }

  .architecture-links {
    display: none;
  }

  .architecture-core {
    position: relative;
    width: 154px;
    height: 154px;
    inset: auto;
    margin: 18px auto 30px;
    grid-row: 1;
    transform: none;
  }

  [dir="rtl"] .architecture-core {
    transform: none;
  }

  .architecture-node {
    position: relative;
    width: 100%;
    min-height: 0;
    inset: auto;
    transform: none;
  }

  .architecture-node-wide {
    width: 100%;
  }

  .node-experience {
    grid-row: 2;
  }

  .node-foundation {
    grid-row: 3;
  }

  .node-services {
    grid-row: 4;
  }

  .node-alpha {
    grid-row: 5;
  }

  .node-future {
    grid-row: 6;
  }

  .architecture-status {
    inset-block-start: 24px;
    max-width: calc(100% - 48px);
    white-space: normal;
    text-align: center;
  }

  .core-orbit-b {
    inset: -42px;
  }

  .cutaway-window {
    min-height: 390px;
  }

  .shell-cutaway {
    overflow: hidden;
  }

  .cutaway-axis,
  .cutaway-float {
    display: none;
  }

  .cutaway-sidebar {
    width: 58px;
  }

  .cutaway-content {
    margin-inline-start: 58px;
    padding: 16px;
  }

  .cutaway-grid i {
    height: 70px;
  }

  .blueprint-system {
    padding-inline-start: 20px;
  }

  .blueprint-axis {
    display: none;
  }

  .blueprint-layer {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .layer-status {
    grid-column: auto;
  }

  .file-stages,
  [dir="rtl"] .file-stages {
    padding-inline-start: 0;
  }

  .file-flow-line {
    display: none;
  }

  .file-stage {
    grid-template-columns: 42px 1fr;
    padding: 20px;
  }

  .file-stage::before,
  .file-stage::after {
    display: none;
  }

  .stage-icon {
    width: 42px;
    height: 42px;
  }

  .storage-ports,
  [dir="rtl"] .storage-ports {
    grid-template-columns: repeat(2, 1fr);
    margin-inline-start: 0;
  }

  .intelligence-system {
    min-height: auto;
    padding: 20px;
  }

  .intelligence-core {
    width: 210px;
    height: 210px;
  }

  .copilot-interface,
  [dir="rtl"] .copilot-interface {
    transform: none;
  }

  .product-chapters {
    grid-template-columns: 1fr;
  }

  .product-chapter {
    min-height: 340px;
  }

  .product-interaction-hint {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .product-ecosystem.has-active .product-chapter:not(.is-active) {
    opacity: .82;
  }

  .future-product-grid {
    grid-template-columns: 1fr;
  }

  .future-finance,
  .future-commerce,
  .future-erp {
    grid-column: 1;
    min-height: auto;
    padding: 26px;
  }

  .future-product-card .product-content {
    margin-top: 56px;
  }

  .ecosystem-spine {
    grid-template-columns: 1fr 7px auto 7px 1fr;
    font-size: .52rem;
  }

  .invitation-scene {
    padding: 76px 0;
  }

  .invitation-header {
    grid-template-columns: 1fr;
  }

  .invitation-mark {
    width: 64px;
    height: 64px;
  }

  .invitation-mark img {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .invitation-mark-pulse {
    inset-inline-end: 10px;
  }

  .invitation-kicker {
    font-size: .56rem;
  }

  .invitation-layout h2 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
    line-height: 1.12;
  }

  .invitation-grid {
    grid-template-columns: 1fr;
  }

  .manifest-belief,
  .manifest-principle,
  .manifest-philosophy,
  .manifest-launch,
  .manifest-quote,
  .manifest-access {
    grid-column: 1;
    min-height: auto;
  }

  .manifest-belief,
  .manifest-principle,
  .manifest-philosophy,
  .manifest-launch {
    padding: 24px;
  }

  .manifest-glyph {
    margin-bottom: 34px;
  }

  .manifest-quote {
    padding: 34px 24px;
  }

  .manifest-quote blockquote {
    font-size: clamp(1.55rem, 7.5vw, 2.35rem);
  }

  .manifest-access {
    padding: 28px 24px;
  }
}

@media (max-width: 420px) {
  .header-inner {
    direction: ltr;
    grid-template-columns: auto 1fr auto;
  }

  .brand {
    grid-column: 3;
    justify-self: end;
    direction: rtl;
  }

  .brand-copy {
    display: none;
  }

  .header-actions {
    grid-column: 1;
    grid-row: 1;
    direction: rtl;
  }

  .nav-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .hero-layout,
  .hero-copy,
  .hero-copy h1,
  .hero-lead,
  .hero-note,
  .hero-actions {
    min-width: 0;
    max-width: 100%;
  }

  [dir="rtl"] .hero-copy h1 {
    width: 100%;
    font-size: clamp(2.25rem, 10.3vw, 2.75rem);
    line-height: 1.28;
  }

  [dir="rtl"] .hero-lead {
    font-size: 1rem;
    line-height: 1.85;
  }
}

@media (hover: hover) and (pointer: fine) {
  .architecture-node,
  .future-product-card,
  .blueprint-layer,
  .file-stage {
    cursor: default;
  }

  .product-chapter {
    cursor: pointer;
  }

  .architecture-frame:hover {
    border-color: rgb(167 139 250 / 24%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 11%),
      inset 0 -100px 140px rgb(3 5 14 / 30%),
      0 52px 110px rgb(0 0 0 / 38%),
      0 0 90px rgb(79 70 229 / 13%);
  }

  .architecture-node:hover {
    z-index: 8;
    border-color: rgb(34 211 238 / 30%);
    box-shadow:
      0 25px 60px rgb(0 0 0 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 11%),
      0 0 35px rgb(34 211 238 / 8%);
    transform: translateZ(38px) translateY(-4px);
  }

  .product-chapter:hover {
    z-index: 3;
    border-color: rgb(var(--product-rgb) / 34%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 9%),
      0 30px 78px rgb(0 0 0 / 31%),
      0 0 42px rgb(var(--product-rgb) / 8%);
    opacity: 1 !important;
    transform:
      perspective(1000px)
      rotateX(var(--card-tilt-x))
      rotateY(var(--card-tilt-y))
      translateY(-5px);
  }

  .product-chapter.is-active:hover {
    transform:
      perspective(1000px)
      rotateX(var(--card-tilt-x))
      rotateY(var(--card-tilt-y))
      translateY(-9px)
      scale(1.012);
  }

  .future-product-card:hover {
    z-index: 2;
    border-color: rgb(34 211 238 / 30%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 10%),
      0 36px 86px rgb(0 0 0 / 30%),
      0 0 44px rgb(124 58 237 / 9%);
    transform: translateY(-6px);
  }

  .future-commerce:hover {
    transform: translateY(-28px);
  }

  .manifest-card:hover {
    border-color: rgb(34 211 238 / 28%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 10%),
      0 34px 80px rgb(0 0 0 / 28%),
      0 0 38px rgb(124 58 237 / 8%);
    transform: translateY(-4px);
  }

  .manifest-quote:hover {
    border-color: rgb(167 139 250 / 38%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .constellation-canvas {
    display: none;
  }

  .reveal,
  .file-stage,
  .manifest-card {
    opacity: 1;
    transform: none;
  }

  .architecture-frame,
  [dir="rtl"] .architecture-frame,
  .architecture-node,
  .architecture-status {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .product-chapter,
  .product-chapter.is-active,
  .product-chapter.is-active:hover {
    opacity: 1;
    transform: none;
  }

  .product-chapter.is-active .product-visual span,
  .product-chapter.is-active .product-visual i {
    animation: none;
  }

  .architecture-core,
  [dir="rtl"] .architecture-core {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -50%) translateZ(64px);
  }

  .file-flow-line span {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .architecture-core,
  [dir="rtl"] .architecture-core {
    transform: none;
  }
}

@media (forced-colors: active) {
  .global-atmosphere,
  .constellation-canvas,
  .hero-horizon,
  .invitation-atmosphere,
  .architecture-links,
  .file-flow-line,
  .ecosystem-spine,
  .horizon-scene::after {
    display: none;
  }

  .architecture-frame,
  .architecture-node,
  .architecture-core,
  .experience-column,
  .cutaway-window,
  .blueprint-layer,
  .file-stage,
  .intelligence-system,
  .product-chapter,
  .future-product-card,
  .horizon-band,
  .manifest-card {
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .product-chapter:focus-visible,
  .product-chapter.is-active {
    outline: 2px solid CanvasText;
    outline-offset: 3px;
  }

  .product-visual {
    display: none;
  }

  .architecture-grid,
  .architecture-aurora,
  .core-orbit,
  .core-pulse {
    display: none;
  }

  .node-chips span {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .invitation-layout h2 {
    background: none;
    color: CanvasText;
  }

  .manifest-card p,
  .manifest-quote figcaption,
  .manifest-quote blockquote,
  .invitation-kicker,
  .access-label {
    color: CanvasText;
  }
}