@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/materialiq/fonts/space-grotesk-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/materialiq/fonts/ibm-plex-sans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --paper: #f7f9fd;
  --pale-blue: #ecf1fa;
  --cobalt: #2f5be8;
  --royal: #0a2c5c;
  --midnight: #0e1145;
  --blood-orange: #ff3333;
  --midnight-deep: #090c34;
  --line: rgba(236, 241, 250, 0.14);
  --line-strong: rgba(236, 241, 250, 0.24);
  --muted: rgba(236, 241, 250, 0.68);
  --shell: min(1240px, calc(100% - 64px));
  --space-section: clamp(7rem, 12vw, 12rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--midnight);
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
}

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

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--midnight);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font: 600 0.85rem/1 "IBM Plex Sans", sans-serif;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

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

.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;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}

.site-header.is-scrolled {
  background: rgba(9, 12, 52, 0.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 166px;
  flex: 0 0 auto;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-panel,
.nav-links {
  display: flex;
  align-items: center;
}

.nav-panel {
  gap: clamp(18px, 2.5vw, 38px);
}

.nav-links {
  gap: clamp(4px, 1vw, 16px);
}

.nav-links a,
.nav-links .disabled-page-link {
  padding: 10px 7px;
  color: rgba(236, 241, 250, 0.72);
  font: 500 0.82rem/1.2 "IBM Plex Sans", sans-serif;
  text-decoration: none;
  transition: color 180ms ease;
}

.nav-links .disabled-page-link {
  color: rgba(236, 241, 250, 0.42);
  cursor: default;
}

.nav-links a:hover {
  color: var(--paper);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(236, 241, 250, 0.04);
}

.nav-toggle span {
  display: block;
  width: 19px;
  height: 1px;
  margin: 5px auto;
  background: var(--paper);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 0.9rem/1.2 "Space Grotesk", sans-serif;
  text-decoration: none;
  transition: transform 200ms var(--ease), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.button svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 200ms var(--ease);
}

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

.button:hover svg {
  transform: translateX(3px);
}

.button-primary {
  color: var(--paper);
  background: var(--cobalt);
  box-shadow: 0 14px 36px rgba(47, 91, 232, 0.18);
}

.button-primary:hover {
  background: #3865f0;
  box-shadow: 0 18px 42px rgba(47, 91, 232, 0.26);
}

.button-secondary {
  color: var(--paper);
  background: rgba(236, 241, 250, 0.025);
  border-color: var(--line-strong);
}

.button-secondary:hover {
  background: rgba(236, 241, 250, 0.07);
  border-color: rgba(236, 241, 250, 0.36);
}

.button-disabled,
.button-disabled:hover {
  color: rgba(236, 241, 250, 0.46);
  background: rgba(236, 241, 250, 0.025);
  border-color: var(--line);
  box-shadow: none;
  cursor: default;
  transform: none;
}

.nav-cta {
  min-height: 44px;
  padding: 11px 15px;
  font-size: 0.78rem;
}

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

.hero {
  position: relative;
  min-height: auto;
  display: grid;
  place-items: start center;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 32%, rgba(47, 91, 232, 0.19), transparent 28%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);
}

.hero-grid,
.platform-grid {
  position: absolute;
  inset: 86px 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(236, 241, 250, 0.046) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 250, 0.046) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero-radial {
  position: absolute;
  right: -26vw;
  bottom: -50vw;
  width: 92vw;
  aspect-ratio: 1;
  border: 1px solid rgba(47, 91, 232, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 8vw rgba(47, 91, 232, 0.022),
    0 0 0 16vw rgba(47, 91, 232, 0.018),
    0 0 0 24vw rgba(47, 91, 232, 0.014);
}

.hero-flow {
  position: absolute;
  inset: auto 0 -1px;
  width: 100%;
  height: min(48vw, 640px);
  overflow: visible;
  fill: none;
  stroke: rgba(47, 91, 232, 0.14);
  stroke-width: 1.2;
}

.hero-flow .flow-active {
  stroke: url(#flowStroke);
  stroke-width: 2;
  stroke-dasharray: 14 18;
  animation: flow-drift 18s linear infinite;
}

.hero-flow circle {
  fill: var(--cobalt);
  stroke: rgba(236, 241, 250, 0.46);
  stroke-width: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 132px 0 72px;
  text-align: center;
}

.system-label,
.section-label,
.diagram-heading {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(36px, 5vw, 62px);
  padding: 10px 14px;
  color: rgba(236, 241, 250, 0.68);
  background: rgba(236, 241, 250, 0.035);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: clamp(0.61rem, 0.8vw, 0.73rem);
  white-space: nowrap;
}

.hero-status > span:not(.status-dot) {
  color: rgba(236, 241, 250, 0.33);
}

.status-dot {
  width: 6px;
  height: 6px;
  margin-right: 2px;
  background: var(--blood-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 51, 51, 0.08);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 30px;
  font-size: clamp(3.15rem, 5.35vw, 5.125rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.91;
}

.hero h1 {
  width: 100%;
  max-width: 1040px;
}

h1 span {
  display: block;
}

h1 strong {
  font-weight: 600;
}

h1 em {
  color: var(--cobalt);
  font-style: normal;
  font-weight: 600;
}

.hero-copy {
  max-width: 700px;
  margin-bottom: 36px;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.62;
}

.value-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  margin-bottom: 38px;
  color: rgba(247, 249, 253, 0.82);
  font-size: clamp(0.9rem, 1.25vw, 1.08rem);
  font-weight: 500;
}

.value-line i {
  width: 3px;
  height: 3px;
  background: rgba(236, 241, 250, 0.34);
  border-radius: 50%;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.section {
  position: relative;
  overflow: hidden;
  padding: var(--space-section) 0;
}

.home-materials {
  position: relative;
  padding: clamp(58px, 6vw, 84px) 0 clamp(68px, 7vw, 98px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(47, 91, 232, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #090c34, #0a0e39);
  background-size: 88px 100%;
  border-block: 1px solid rgba(47, 91, 232, 0.13);
}

.home-materials::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 18%, rgba(47, 91, 232, 0.12), transparent 32%);
}

.home-materials .shell {
  position: relative;
  z-index: 1;
}

.home-materials-intro {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 50px);
}

.home-materials-intro .section-label {
  margin-bottom: 8px;
}

.home-materials-intro h2 {
  margin: 0 0 9px;
  font-size: clamp(2.15rem, 3.55vw, 3.8rem);
  line-height: 0.98;
}

.home-materials-intro > div > p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
}

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

@media (min-width: 1021px) {
  .home-material:nth-child(-n + 4) { grid-column: span 3; }
  .home-material:nth-child(n + 5) { grid-column: span 4; }
}

.home-material {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--royal);
  border: 1px solid rgba(236, 241, 250, 0.14);
  border-radius: 4px;
}

.home-material::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 12, 52, 0.03) 20%, rgba(9, 12, 52, 0.88) 100%);
  pointer-events: none;
}

.home-material img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.82) contrast(1.04);
  transition: filter 420ms var(--ease), transform 700ms var(--ease);
}

.home-material:nth-child(1) img { object-position: 52% 56%; }
.home-material:nth-child(2) img { object-position: 60% 50%; }
.home-material:nth-child(3) img { object-position: 47% 62%; }
.home-material:nth-child(4) img { object-position: 56% 62%; }
.home-material:nth-child(5) img { object-position: 52% 58%; }
.home-material:nth-child(6) img { object-position: 43% 52%; }
.home-material:nth-child(7) img { object-position: 52% 54%; }

.home-material figcaption {
  position: absolute;
  z-index: 2;
  inset: auto 14px 13px;
  display: flex;
  flex-direction: column;
}

.home-material figcaption strong {
  color: var(--paper);
  font-size: clamp(0.95rem, 1.25vw, 1.13rem);
  font-weight: 560;
  line-height: 1.1;
}

@media (hover: hover) {
  .home-material:hover img {
    filter: saturate(0.92) brightness(0.9) contrast(1.03);
    transform: scale(1.025);
  }
}

.problem-section {
  background:
    linear-gradient(180deg, var(--midnight-deep) 0, #0b0f3b 18%, #0d1748 100%);
  border-top: 1px solid rgba(47, 91, 232, 0.12);
}

.section-orbit {
  position: absolute;
  width: 670px;
  aspect-ratio: 1;
  border: 1px solid rgba(47, 91, 232, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 82px rgba(47, 91, 232, 0.013), 0 0 0 164px rgba(47, 91, 232, 0.01);
  pointer-events: none;
}

.section-orbit-left {
  top: 6%;
  left: -520px;
}

.section-intro {
  display: grid;
  grid-template-columns: 0.56fr 1.44fr;
  gap: clamp(36px, 8vw, 120px);
  align-items: start;
  margin-bottom: clamp(72px, 9vw, 124px);
}

.section-label {
  margin: 12px 0 0;
  color: rgba(236, 241, 250, 0.54);
  font-size: 0.69rem;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin: 0 12px 3px 0;
  background: var(--cobalt);
}

h2 {
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 0.97;
}

.problem-section h2 span,
.platform-section h2 span {
  color: var(--cobalt);
}

.problem-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: clamp(56px, 9vw, 130px);
  align-items: center;
}

.problem-copy {
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
}

.problem-copy p {
  margin-bottom: 26px;
}

.problem-copy .copy-emphasis {
  color: var(--paper);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
}

.flow-figure {
  margin: 0;
  padding: clamp(24px, 3.5vw, 44px);
  background: linear-gradient(145deg, rgba(47, 91, 232, 0.075), rgba(10, 44, 92, 0.09));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 34px 90px rgba(3, 5, 28, 0.22);
}

.diagram-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(236, 241, 250, 0.55);
  font-size: 0.61rem;
}

.diagram-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(236, 241, 250, 0.46);
  letter-spacing: 0.12em;
}

.diagram-state i {
  width: 5px;
  height: 5px;
  background: var(--cobalt);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 91, 232, 0.1);
}

.diagram-state.is-alert i {
  background: var(--blood-orange);
  box-shadow: 0 0 0 4px rgba(255, 51, 51, 0.07);
}

.material-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 40px 0 14px;
}

.flow-track {
  position: absolute;
  top: 61px;
  left: 10%;
  right: 10%;
  height: 1px;
  overflow: hidden;
  background: rgba(47, 91, 232, 0.4);
}

.flow-track span {
  display: block;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--paper), transparent);
  animation: track-scan 7s ease-in-out infinite;
}

.flow-participant {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(247, 249, 253, 0.78);
  font-size: clamp(0.69rem, 0.9vw, 0.82rem);
  text-align: center;
}

.flow-participant b {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--pale-blue);
  background: var(--royal);
  border: 1px solid rgba(47, 91, 232, 0.7);
  border-radius: 50%;
  font: 500 0.61rem/1 "IBM Plex Sans", sans-serif;
  box-shadow: 0 0 0 6px #101846;
}

.diagram-divider {
  height: 1px;
  margin: 34px 0 27px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.fragmented-heading {
  margin-bottom: 26px;
}

.record-grid {
  position: relative;
  min-height: 170px;
}

.record {
  position: absolute;
  width: clamp(112px, 13vw, 146px);
  padding: 11px 12px;
  color: rgba(247, 249, 253, 0.72);
  background: rgba(9, 12, 52, 0.72);
  border: 1px solid rgba(236, 241, 250, 0.13);
  border-radius: 6px;
  font-size: 0.68rem;
  box-shadow: 0 10px 28px rgba(3, 5, 28, 0.18);
}

.record i {
  display: block;
  width: 18px;
  height: 2px;
  margin-bottom: 9px;
  background: rgba(47, 91, 232, 0.8);
}

.record small {
  display: block;
  margin-top: 4px;
  color: rgba(236, 241, 250, 0.35);
  font: 500 0.56rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.record-1 { top: 0; left: 0; transform: rotate(-2deg); }
.record-2 { top: 55px; left: 21%; transform: rotate(1.5deg); }
.record-3 { top: 6px; left: 43%; transform: rotate(-1deg); }
.record-4 { top: 61px; right: 17%; transform: rotate(2deg); }
.record-5 { top: 0; right: 0; transform: rotate(-1.5deg); }

.problem-conclusion {
  margin: clamp(100px, 13vw, 180px) 0 0;
  color: rgba(236, 241, 250, 0.7);
  font-size: clamp(2.8rem, 6.6vw, 6.5rem);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.problem-conclusion span {
  color: var(--paper);
}

.platform-section {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 35%, rgba(47, 91, 232, 0.2), transparent 28%),
    linear-gradient(180deg, #0d1748, var(--midnight) 38%, var(--midnight-deep));
}

.platform-grid {
  inset: 0;
  opacity: 0.55;
  mask-image: radial-gradient(circle at 50% 55%, black, transparent 75%);
}

.platform-glow {
  position: absolute;
  top: 41%;
  left: 50%;
  width: min(900px, 80vw);
  height: 1px;
  transform: translateX(-50%);
  background: var(--cobalt);
  box-shadow: 0 0 90px 38px rgba(47, 91, 232, 0.14);
  opacity: 0.6;
}

.platform-section .shell {
  position: relative;
  z-index: 2;
}

.platform-intro {
  max-width: 1100px;
}

.platform-intro .section-label {
  margin-bottom: 42px;
}

.platform-intro h2 {
  max-width: 1080px;
  font-size: clamp(3rem, 5.7vw, 5.75rem);
}

.platform-copy {
  max-width: 655px;
  margin: clamp(40px, 6vw, 72px) 0 clamp(90px, 11vw, 138px);
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.platform-copy p {
  margin-bottom: 16px;
}

.progression {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 72px);
}

.progression-line {
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  height: 1px;
  overflow: hidden;
  background: rgba(236, 241, 250, 0.17);
}

.progression-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt), rgba(47, 91, 232, 0.45));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s 180ms var(--ease);
}

.progression.is-visible .progression-line span {
  transform: scaleX(1);
}

.progression-step {
  position: relative;
}

.step-node {
  display: grid;
  width: 51px;
  height: 51px;
  margin-bottom: 34px;
  place-items: center;
  color: var(--paper);
  background: var(--midnight);
  border: 1px solid rgba(47, 91, 232, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--midnight), 0 0 32px rgba(47, 91, 232, 0.15);
}

.step-node span {
  font: 500 0.64rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.08em;
}

.progression-step.is-final .step-node {
  background: var(--cobalt);
}

.progression-step h3 {
  margin-bottom: 12px;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  font-weight: 560;
  letter-spacing: -0.035em;
}

.progression-step p {
  max-width: 215px;
  margin: 0;
  color: rgba(236, 241, 250, 0.58);
  font-size: 0.92rem;
}

.closing-statement {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
  margin-top: clamp(150px, 20vw, 260px);
  padding-top: clamp(56px, 8vw, 88px);
  border-top: 1px solid var(--line);
}

.closing-statement img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.closing-statement p {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 6.4rem);
  font-weight: 550;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.closing-statement span {
  color: var(--cobalt);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes flow-drift {
  to { stroke-dashoffset: -256; }
}

@keyframes track-scan {
  0%, 15% { transform: translateX(-110%); opacity: 0; }
  35% { opacity: 0.9; }
  75%, 100% { transform: translateX(320%); opacity: 0; }
}

@media (max-width: 1120px) {
  .nav-panel {
    gap: 15px;
  }

  .nav-links {
    gap: 1px;
  }

  .nav-links a,
  .nav-links .disabled-page-link {
    font-size: 0.75rem;
  }

  .nav-cta {
    padding-inline: 12px;
  }
}

@media (max-width: 1020px) {
  :root {
    --shell: min(100% - 48px, 920px);
  }

  .nav-toggle {
    position: relative;
    z-index: 3;
    display: block;
  }

  .nav-panel {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    padding: 110px max(24px, calc((100vw - 920px) / 2));
    background:
      radial-gradient(circle at 80% 15%, rgba(47, 91, 232, 0.2), transparent 36%),
      rgba(9, 12, 52, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms ease, visibility 220ms ease, transform 220ms var(--ease);
  }

  .nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links a,
  .nav-links .disabled-page-link {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.45rem, 4vw, 2.1rem);
    font-weight: 500;
  }

  .nav-links a {
    color: var(--paper);
  }

  .nav-cta {
    align-self: flex-start;
  }

  .hero {
    min-height: auto;
  }

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

  .section-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .problem-copy {
    max-width: 600px;
  }

  .progression {
    gap: 32px;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100% - 36px);
    --space-section: clamp(6.5rem, 25vw, 9rem);
  }

  .nav {
    min-height: 74px;
  }

  .brand {
    width: 145px;
  }

  .hero {
    min-height: auto;
    place-items: start center;
  }

  .hero-grid {
    inset: 74px 0 0;
    background-size: 64px 64px;
  }

  .hero-inner {
    align-items: flex-start;
    padding: 138px 0 96px;
    text-align: left;
  }

  .hero-status {
    max-width: 100%;
    gap: 6px;
    margin-bottom: 42px;
    padding: 9px 10px;
    overflow: hidden;
    font-size: 0.52rem;
    text-overflow: ellipsis;
  }

  h1 {
    font-size: clamp(3.25rem, 15.8vw, 5rem);
    line-height: 0.94;
  }

  h1 span:first-child {
    margin-bottom: 8px;
  }

  .hero-copy {
    max-width: 34rem;
    font-size: 1rem;
  }

  .value-line {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
  }

  .hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .home-materials {
    padding: 64px 0 76px;
    background-size: 64px 100%;
  }

  .home-materials-intro {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 32px;
  }

  .home-materials-intro h2 {
    max-width: 11ch;
    font-size: clamp(2.6rem, 12vw, 3.55rem);
  }

  .home-materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-material figcaption {
    inset: auto 11px 11px;
  }

  .home-material figcaption strong {
    font-size: 1rem;
  }

  h2,
  .platform-intro h2 {
    font-size: clamp(2.9rem, 13vw, 4.3rem);
  }

  .section-label {
    margin-top: 0;
  }

  .flow-figure {
    padding: 22px 16px;
  }

  .diagram-heading {
    align-items: flex-start;
    font-size: 0.54rem;
  }

  .material-flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 28px 0 10px;
  }

  .flow-track {
    top: 49px;
    bottom: 37px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .flow-track span {
    width: 100%;
    height: 32%;
    background: linear-gradient(180deg, transparent, var(--paper), transparent);
    animation-name: track-scan-mobile;
  }

  .flow-participant {
    min-height: 66px;
    flex-direction: row;
    gap: 18px;
    text-align: left;
  }

  .flow-participant b {
    width: 43px;
    flex: 0 0 43px;
  }

  .record-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-height: 0;
  }

  .record {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
  }

  .record-5 {
    grid-column: 2;
  }

  .problem-conclusion {
    font-size: clamp(2.85rem, 13.5vw, 4.5rem);
  }

  .platform-copy {
    margin-bottom: 76px;
  }

  .progression {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-left: 2px;
  }

  .progression-line {
    top: 25px;
    bottom: 25px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .progression-line span {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, var(--cobalt), rgba(47, 91, 232, 0.45));
  }

  .progression.is-visible .progression-line span {
    transform: scaleY(1);
  }

  .progression-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 22px;
  }

  .step-node {
    grid-row: 1 / 3;
    margin: 0;
  }

  .progression-step h3 {
    margin: 0 0 7px;
  }

  .progression-step p {
    max-width: 280px;
  }

  .closing-statement {
    grid-template-columns: 1fr;
    margin-top: 120px;
  }

  .closing-statement img {
    width: 44px;
    height: 44px;
  }

  .closing-statement p {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  @keyframes track-scan-mobile {
    0%, 15% { transform: translateY(-110%); opacity: 0; }
    35% { opacity: 0.9; }
    75%, 100% { transform: translateY(320%); opacity: 0; }
  }
}

@media (max-width: 390px) {
  .hero-status {
    letter-spacing: 0.11em;
  }

  h1 {
    font-size: 3.18rem;
  }

  .value-line {
    gap: 9px;
    font-size: 0.84rem;
  }

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

  .record-5 {
    grid-column: auto;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Focused product pages */
.inner-page {
  background: var(--midnight-deep);
}

.inner-page .site-header {
  background: rgba(9, 12, 52, 0.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

.nav-links a[aria-current="page"] {
  color: var(--paper);
}

.page-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 150px 0 110px;
  background:
    radial-gradient(circle at 72% 40%, rgba(47, 91, 232, 0.18), transparent 30%),
    linear-gradient(180deg, var(--midnight), var(--midnight-deep));
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 86px 0 0;
  background-image:
    linear-gradient(rgba(236, 241, 250, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 250, 0.042) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -280px;
  bottom: -460px;
  width: 820px;
  height: 820px;
  border: 1px solid rgba(47, 91, 232, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(47,91,232,.013), 0 0 0 200px rgba(47,91,232,.009);
}

.page-hero .shell {
  position: relative;
  z-index: 2;
}

.page-hero .section-label {
  margin: 0 0 40px;
}

.page-hero h1 {
  max-width: 1080px;
  margin-bottom: 38px;
  font-size: clamp(3.8rem, 7vw, 7rem);
}

.page-hero h1 em {
  color: var(--cobalt);
}

.page-lede {
  max-width: 710px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.page-section {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 13vw, 180px) 0;
  background: linear-gradient(180deg, var(--midnight-deep), #0d1748);
}

.page-section.alt {
  background: linear-gradient(180deg, #0d1748, var(--midnight-deep));
}

.page-section-heading {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  margin-bottom: clamp(70px, 10vw, 130px);
}

.page-section-heading h2 {
  font-size: clamp(2.8rem, 5.2vw, 5.2rem);
}

.page-section-heading p {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
}

.page-flow-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-flow-list article {
  min-height: 220px;
  padding: clamp(25px, 3vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-flow-list article > span {
  display: block;
  margin-bottom: 54px;
  color: rgba(236,241,250,.32);
  font: 500 .58rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .13em;
}

.page-flow-list h3 {
  margin-bottom: 12px;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 550;
}

.page-flow-list p {
  margin: 0;
  color: rgba(236,241,250,.53);
  font-size: .9rem;
}

.page-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-pillar-grid article {
  min-height: 300px;
  padding: clamp(30px, 4vw, 50px);
  background: var(--midnight);
}

.page-pillar-grid span {
  display: block;
  margin-bottom: 70px;
  color: var(--cobalt);
  font: 500 .62rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-pillar-grid h2,
.page-pillar-grid h3 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 550;
}

.page-pillar-grid p {
  color: var(--muted);
}

.page-next {
  padding: clamp(90px, 12vw, 150px) 0;
  background: var(--midnight-deep);
  border-top: 1px solid var(--line);
}

.page-next .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.page-next p {
  margin: 0;
  color: rgba(236,241,250,.42);
  font: 500 .62rem/1.3 "IBM Plex Sans", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.page-next h2 {
  max-width: 760px;
  margin-top: 18px;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

.company-position {
  max-width: 1040px;
  font-size: clamp(2.6rem, 5.5vw, 5.4rem);
  font-weight: 540;
  letter-spacing: -.05em;
  line-height: 1;
}

.company-position span {
  color: var(--cobalt);
}

@media (max-width: 900px) {
  .page-hero {
    min-height: 680px;
  }

  .page-section-heading {
    grid-template-columns: 1fr;
  }

  .page-flow-list,
  .page-pillar-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .page-hero {
    min-height: 690px;
    padding-top: 130px;
  }

  .page-hero h1 {
    font-size: clamp(3.25rem, 14vw, 4.8rem);
  }

  .page-flow-list,
  .page-pillar-grid {
    grid-template-columns: 1fr;
  }

  .page-next .shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Homepage continuation */
.section-grid-fade,
.intelligence-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(236, 241, 250, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 250, 0.038) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 72%, transparent);
}

.split-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(54px, 9vw, 140px);
  align-items: end;
  margin-bottom: clamp(76px, 11vw, 146px);
}

.split-intro .section-label {
  margin: 0 0 38px;
}

.split-intro h2 {
  max-width: 820px;
}

.section-support {
  margin: 0;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.section-support p:last-child {
  margin-bottom: 0;
}

.section-cta {
  margin-top: clamp(50px, 7vw, 84px);
}

.centered-cta {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.centered-cta:hover {
  transform: translate(-50%, -2px);
}

.system-kicker,
.material-id,
.config-line > span,
.network-caption,
.evidence-flow span,
.journey-record > span,
.journey-fields span,
.journey-status,
.footer-meta {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.capabilities-section {
  background:
    radial-gradient(circle at 8% 42%, rgba(47, 91, 232, 0.12), transparent 25%),
    linear-gradient(180deg, var(--midnight-deep), #0b1240 58%, var(--midnight));
}

.capability-system {
  position: relative;
  display: grid;
  grid-template-columns: 180px 76px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(9, 12, 52, 0.5);
  box-shadow: 0 32px 100px rgba(3, 5, 28, 0.22);
}

.supply-input {
  padding: 18px;
  border: 1px solid rgba(236, 241, 250, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(10, 44, 92, 0.25);
}

.supply-input span,
.supply-input small {
  display: block;
}

.supply-input span {
  margin-bottom: 12px;
  color: rgba(236, 241, 250, 0.38);
  font-size: 0.55rem;
}

.supply-input strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.96rem;
  font-weight: 550;
}

.supply-input small {
  color: rgba(236, 241, 250, 0.42);
  font: 400 0.65rem/1.4 "IBM Plex Sans", sans-serif;
}

.input-connector {
  height: 1px;
  overflow: hidden;
  background: rgba(47, 91, 232, 0.34);
}

.input-connector span {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--paper), transparent);
  animation: connector-scan 5s ease-in-out infinite;
}

.reverse-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.chain-line {
  position: absolute;
  top: 24px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(47, 91, 232, 0.36);
}

.chain-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt), rgba(47, 91, 232, 0.2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s 250ms var(--ease);
}

.capability-system.is-visible .chain-line span {
  transform: scaleX(1);
}

.chain-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(247, 249, 253, 0.72);
  font-size: clamp(0.65rem, 0.78vw, 0.78rem);
  text-align: center;
}

.chain-stage b {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--paper);
  background: var(--midnight);
  border: 1px solid rgba(47, 91, 232, 0.75);
  border-radius: 50%;
  font: 500 0.58rem/1 "IBM Plex Sans", sans-serif;
  box-shadow: 0 0 0 7px var(--midnight), 0 0 25px rgba(47, 91, 232, 0.12);
}

.reconciliation-layer {
  grid-column: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 48px;
  padding: 14px 18px;
  border: 1px solid rgba(47, 91, 232, 0.25);
  border-radius: 6px;
  color: rgba(236, 241, 250, 0.55);
  font: 500 0.56rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.reconciliation-layer i {
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.55), transparent);
}

.reconciliation-layer small {
  color: rgba(236, 241, 250, 0.35);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.capability-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(54px, 8vw, 110px);
  margin-top: clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--line);
}

.capability-list article {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 22px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}

.capability-list article > span,
.differentiators article > span {
  color: rgba(236, 241, 250, 0.32);
  font: 500 0.61rem/1.5 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.capability-list h3 {
  margin-bottom: 9px;
  font-size: clamp(1.25rem, 1.75vw, 1.6rem);
  font-weight: 550;
}

.capability-list p {
  margin: 0;
  color: rgba(236, 241, 250, 0.54);
  font-size: 0.88rem;
}

.solutions-section {
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 91, 232, 0.15), transparent 30%),
    linear-gradient(180deg, var(--midnight), #0a0e39);
}

.solutions-orbit {
  top: 34%;
  left: 50%;
  width: min(820px, 72vw);
  transform: translateX(-50%);
  box-shadow: 0 0 0 110px rgba(47, 91, 232, 0.012), 0 0 0 220px rgba(47, 91, 232, 0.008);
}

.section-heading-centered {
  position: relative;
  z-index: 2;
  max-width: 1010px;
  margin: 0 auto clamp(90px, 12vw, 155px);
  text-align: center;
}

.section-heading-centered .section-label {
  margin: 0 0 38px;
}

.section-heading-centered h2 {
  margin-bottom: 38px;
}

.section-heading-centered > p:last-child,
.section-heading-centered > div {
  max-width: 710px;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.participant-perspectives {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr);
  grid-template-areas:
    "a core d"
    "b core e"
    "c core f";
  gap: 36px clamp(45px, 6vw, 90px);
  align-items: center;
}

.perspective-a { grid-area: a; }
.perspective-b { grid-area: b; }
.perspective-c { grid-area: c; }
.perspective-d { grid-area: d; }
.perspective-e { grid-area: e; }
.perspective-f { grid-area: f; }

.perspective {
  padding: 22px 0 28px;
  border-top: 1px solid rgba(236, 241, 250, 0.18);
}

.perspective > span {
  display: block;
  margin-bottom: 14px;
  color: rgba(236, 241, 250, 0.38);
  font: 500 0.57rem/1.35 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.13em;
}

.perspective h3 {
  margin-bottom: 12px;
  font-size: clamp(1.18rem, 1.75vw, 1.55rem);
  font-weight: 550;
  line-height: 1.18;
}

.perspective p {
  margin: 0;
  color: rgba(236, 241, 250, 0.51);
  font-size: 0.86rem;
}

.perspective-core {
  grid-area: core;
  position: relative;
  display: flex;
  min-height: 530px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.core-rings,
.core-rings i {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(47, 91, 232, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.core-rings {
  width: 224px;
  height: 224px;
  border-color: rgba(47, 91, 232, 0.48);
  box-shadow: inset 0 0 65px rgba(47, 91, 232, 0.07), 0 0 60px rgba(47, 91, 232, 0.08);
}

.core-rings i:nth-child(1) { width: 152px; height: 152px; }
.core-rings i:nth-child(2) { width: 300px; height: 300px; }
.core-rings i:nth-child(3) { width: 390px; height: 390px; opacity: 0.5; }

.perspective-core img {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
}

.perspective-core > span {
  position: relative;
  z-index: 1;
  max-width: 145px;
  color: rgba(236, 241, 250, 0.54);
  font: 500 0.57rem/1.6 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.14em;
  text-align: center;
}

.materials-section {
  background: linear-gradient(180deg, #0a0e39, #0d1748 56%, var(--midnight));
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.materials-grid article {
  min-height: 265px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(236, 241, 250, 0.012);
  transition: background 220ms ease;
}

.materials-grid article:hover {
  background: rgba(47, 91, 232, 0.06);
}

.material-id {
  color: rgba(236, 241, 250, 0.35);
  font-size: 0.56rem;
}

.material-symbol {
  position: relative;
  grid-row: 1 / 3;
  grid-column: 2;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(47, 91, 232, 0.55);
  border-radius: 50%;
}

.material-symbol::before,
.material-symbol::after,
.material-symbol i {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--cobalt);
  transform: translate(-50%, -50%);
}

.tire-symbol::before { width: 34px; height: 34px; border: 2px solid var(--cobalt); border-radius: 50%; background: none; }
.tire-symbol::after { width: 16px; height: 16px; border: 1px solid rgba(236,241,250,.5); border-radius: 50%; background: none; }
.battery-symbol::before { width: 25px; height: 38px; border: 1px solid var(--cobalt); border-radius: 3px; background: none; }
.battery-symbol::after { top: 16px; width: 10px; height: 4px; }
.electronics-symbol::before { width: 35px; height: 25px; border: 1px solid var(--cobalt); background: none; }
.electronics-symbol::after { top: 47px; width: 25px; height: 1px; }
.packaging-symbol::before { width: 32px; height: 32px; border: 1px solid var(--cobalt); background: none; transform: translate(-50%,-50%) rotate(45deg); }
.packaging-symbol::after { width: 1px; height: 44px; background: rgba(236,241,250,.4); transform: translate(-50%,-50%) rotate(45deg); }
.oil-symbol::before { width: 26px; height: 34px; border-radius: 50% 50% 55% 55% / 70% 70% 35% 35%; transform: translate(-50%,-46%) rotate(45deg); }
.oil-symbol::after { width: 10px; height: 16px; border-radius: 50%; background: var(--midnight); transform: translate(-40%,-25%) rotate(45deg); }
.hazard-symbol::before { width: 32px; height: 32px; border: 1px solid var(--cobalt); background: none; transform: translate(-50%,-50%) rotate(45deg); }
.hazard-symbol::after { width: 3px; height: 18px; background: var(--blood-orange); }

.materials-grid h3 {
  grid-column: 1 / 3;
  margin: 26px 0 6px;
  align-self: end;
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  font-weight: 550;
  letter-spacing: -0.035em;
}

.materials-grid small {
  grid-column: 1 / 3;
  color: rgba(236, 241, 250, 0.35);
  font: 500 0.58rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.config-line {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 40px;
  align-items: baseline;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.config-line > span {
  color: rgba(236, 241, 250, 0.38);
  font-size: 0.59rem;
}

.config-line p {
  margin: 0;
  color: rgba(247, 249, 253, 0.78);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.intelligence-section {
  min-height: 100vh;
  background:
    radial-gradient(circle at 65% 47%, rgba(47, 91, 232, 0.19), transparent 31%),
    linear-gradient(180deg, var(--midnight), #090c35 72%, #0c1545);
}

.intelligence-grid-bg {
  opacity: 0.75;
  mask-image: radial-gradient(circle at 65% 45%, black, transparent 70%);
}

.intelligence-section .shell {
  position: relative;
  z-index: 2;
}

.intelligence-intro {
  max-width: 1100px;
}

.intelligence-intro .section-label {
  margin: 0 0 42px;
}

.intelligence-intro h2 {
  max-width: 1080px;
}

.intelligence-copy {
  max-width: 640px;
  margin: 46px 0 clamp(80px, 10vw, 128px);
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.intelligence-copy p {
  margin-bottom: 10px;
}

.intelligence-network {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(9, 12, 52, 0.4);
}

.intelligence-network svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.network-lines {
  fill: none;
  stroke: rgba(47, 91, 232, 0.37);
  stroke-width: 1.2;
  stroke-dasharray: 6 8;
}

.network-nodes {
  fill: var(--cobalt);
  stroke: rgba(236, 241, 250, 0.7);
  stroke-width: 1;
}

.transaction-focus {
  position: absolute;
  top: 50%;
  left: 7%;
  z-index: 2;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 91, 232, 0.8);
  border-radius: 50%;
  background: var(--midnight);
  box-shadow: 0 0 0 14px rgba(47, 91, 232, 0.06), 0 0 50px rgba(47, 91, 232, 0.14);
  transform: translateY(-50%);
}

.transaction-focus span {
  margin-bottom: 8px;
  color: rgba(236, 241, 250, 0.38);
  font: 500 0.52rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.14em;
}

.transaction-focus strong {
  font-size: 0.88rem;
  font-weight: 550;
}

.transaction-focus i {
  width: 6px;
  height: 6px;
  margin-top: 15px;
  border-radius: 50%;
  background: var(--blood-orange);
}

.network-label {
  position: absolute;
  padding: 8px 11px;
  color: rgba(236, 241, 250, 0.58);
  background: rgba(9, 12, 52, 0.82);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 500 0.57rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.label-1 { left: 33%; top: 13%; }
.label-2 { right: 13%; top: 9%; }
.label-3 { left: 38%; top: 46%; }
.label-4 { right: 18%; top: 53%; }
.label-5 { left: 31%; bottom: 13%; }
.label-6 { right: 11%; bottom: 9%; }

.network-caption {
  position: absolute;
  right: 30px;
  top: 28px;
  color: rgba(236, 241, 250, 0.35);
  font-size: 0.57rem;
}

.intelligence-signals,
.evidence-types {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.intelligence-signals span,
.evidence-types span {
  padding: 9px 12px;
  color: rgba(236, 241, 250, 0.57);
  border: 1px solid rgba(236, 241, 250, 0.12);
  border-radius: 5px;
  background: rgba(236, 241, 250, 0.018);
  font: 500 0.68rem/1.25 "IBM Plex Sans", sans-serif;
}

.intelligence-transition {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 90px minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  margin-top: clamp(120px, 16vw, 210px);
}

.intelligence-transition p {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 540;
  letter-spacing: -0.05em;
  line-height: 1;
}

.intelligence-transition p:first-child {
  color: rgba(236, 241, 250, 0.48);
}

.intelligence-transition p span {
  color: var(--cobalt);
}

.intelligence-transition i {
  position: relative;
  height: 1px;
  background: var(--cobalt);
}

.intelligence-transition i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--cobalt);
  border-right: 1px solid var(--cobalt);
  transform: rotate(45deg);
}

.trust-section {
  background:
    radial-gradient(circle at 30% 60%, rgba(10, 44, 92, 0.5), transparent 32%),
    linear-gradient(180deg, #0c1545, var(--midnight-deep));
}

.evidence-system {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
}

.evidence-flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
}

.evidence-flow > div {
  display: flex;
  width: 96px;
  height: 96px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(236, 241, 250, 0.16);
  border-radius: 50%;
  background: rgba(9, 12, 52, 0.65);
}

.evidence-flow > div span {
  color: rgba(236, 241, 250, 0.32);
  font-size: 0.52rem;
}

.evidence-flow > div strong {
  font-size: 0.78rem;
  font-weight: 550;
}

.evidence-flow > i {
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.18), var(--cobalt), rgba(47, 91, 232, 0.18));
}

.evidence-flow .trusted-record {
  background: var(--cobalt);
  border-color: var(--cobalt);
  box-shadow: 0 0 40px rgba(47, 91, 232, 0.18);
}

.evidence-flow .trusted-record span {
  color: rgba(247, 249, 253, 0.7);
}

.evidence-orbit {
  position: relative;
  min-height: 470px;
  border: 1px solid rgba(47, 91, 232, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgba(47, 91, 232, 0.06), 0 0 0 70px rgba(47, 91, 232, 0.012);
}

.evidence-orbit::before,
.evidence-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(47, 91, 232, 0.12);
  border-radius: 50%;
}

.evidence-orbit::after {
  inset: 27%;
}

.evidence-core {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translate(-50%, -50%);
}

.evidence-core img {
  width: 52px;
  height: 52px;
}

.evidence-core span {
  color: rgba(236, 241, 250, 0.48);
  font: 500 0.54rem/1.4 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.13em;
  text-align: center;
}

.evidence-tag {
  position: absolute;
  z-index: 2;
  padding: 8px 10px;
  color: rgba(236, 241, 250, 0.59);
  background: var(--midnight-deep);
  border: 1px solid rgba(47, 91, 232, 0.26);
  border-radius: 5px;
  font: 500 0.58rem/1 "IBM Plex Sans", sans-serif;
  text-transform: uppercase;
}

.ev-1 { top: 7%; left: 42%; }
.ev-2 { top: 26%; right: 0; }
.ev-3 { bottom: 21%; right: 2%; }
.ev-4 { bottom: 5%; left: 35%; }
.ev-5 { bottom: 24%; left: -3%; }
.ev-6 { top: 23%; left: 0; }

.trust-foundation {
  max-width: 820px;
  margin: clamp(70px, 10vw, 120px) 0 0;
  color: rgba(247, 249, 253, 0.78);
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.4;
}

.trust-close {
  margin: clamp(115px, 16vw, 210px) 0 0;
  color: rgba(236, 241, 250, 0.45);
  font-size: clamp(3rem, 6.4vw, 6.3rem);
  font-weight: 540;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.trust-close span {
  color: var(--paper);
}

.journey-section {
  background:
    radial-gradient(circle at 50% 52%, rgba(47, 91, 232, 0.15), transparent 34%),
    linear-gradient(180deg, var(--midnight-deep), #0d1748 64%, var(--midnight));
}

.material-journey {
  position: relative;
  z-index: 2;
}

.journey-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

.journey-tabs button {
  position: relative;
  min-height: 82px;
  padding: 16px 10px;
  color: rgba(236, 241, 250, 0.48);
  background: rgba(9, 12, 52, 0.62);
  border: 0;
  border-right: 1px solid var(--line);
  font: 500 0.72rem/1.3 "Space Grotesk", sans-serif;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.journey-tabs button:last-child {
  border-right: 0;
}

.journey-tabs button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transition: transform 220ms var(--ease);
}

.journey-tabs button[aria-selected="true"] {
  color: var(--paper);
  background: rgba(47, 91, 232, 0.09);
}

.journey-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.journey-panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(35px, 6vw, 80px);
  min-height: 390px;
  align-items: center;
  padding: clamp(34px, 5vw, 66px);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: rgba(9, 12, 52, 0.46);
}

.journey-record {
  position: relative;
  display: flex;
  width: 190px;
  height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 91, 232, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(47, 91, 232, 0.045), 0 0 50px rgba(47, 91, 232, 0.12);
}

.journey-record > span {
  color: rgba(236, 241, 250, 0.36);
  font-size: 0.52rem;
}

.journey-record strong {
  max-width: 140px;
  margin-top: 10px;
  font-size: 1.35rem;
  font-weight: 550;
  text-align: center;
}

.journey-record i {
  width: 6px;
  height: 6px;
  margin-top: 17px;
  background: var(--blood-orange);
  border-radius: 50%;
}

.journey-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.journey-fields div {
  min-height: 96px;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journey-fields span {
  display: block;
  margin-bottom: 10px;
  color: rgba(236, 241, 250, 0.32);
  font-size: 0.52rem;
}

.journey-fields strong {
  font-size: 0.86rem;
  font-weight: 520;
}

.journey-status {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(236, 241, 250, 0.36);
  font-size: 0.54rem;
}

.journey-status span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.journey-status i {
  width: 5px;
  height: 5px;
  background: var(--cobalt);
  border-radius: 50%;
}

.journey-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 54px 0 0;
  color: rgba(236, 241, 250, 0.55);
  font-size: clamp(0.92rem, 1.3vw, 1.12rem);
}

.journey-equation i {
  color: rgba(236, 241, 250, 0.22);
  font-style: normal;
}

.journey-equation strong {
  margin-left: 8px;
  color: var(--paper);
  font-weight: 550;
}

.why-section {
  background: linear-gradient(180deg, var(--midnight), #0b103d 52%, var(--midnight-deep));
}

.why-section-condensed {
  padding: clamp(110px, 15vw, 190px) 0;
}

.why-section-condensed .why-close {
  margin-top: 0;
}

.differentiators {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(60px, 10vw, 140px);
  border-top: 1px solid var(--line);
}

.differentiators article {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 32px 0 38px;
  border-bottom: 1px solid var(--line);
}

.differentiators h3,
.differentiators p {
  grid-column: 2;
}

.differentiators h3 {
  margin-bottom: 12px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 550;
}

.differentiators p {
  max-width: 460px;
  margin: 0;
  color: rgba(236, 241, 250, 0.53);
  font-size: 0.9rem;
}

.why-close {
  margin-top: clamp(130px, 18vw, 235px);
}

.why-close p {
  margin-bottom: 30px;
  color: rgba(236, 241, 250, 0.48);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.why-close strong {
  display: block;
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 550;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.why-close strong span {
  color: var(--cobalt);
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(130px, 18vw, 230px) 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(47, 91, 232, 0.19), transparent 32%),
    var(--midnight-deep);
  border-top: 1px solid rgba(47, 91, 232, 0.14);
}

.final-radial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(840px, 78vw);
  aspect-ratio: 1;
  border: 1px solid rgba(47, 91, 232, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 95px rgba(47, 91, 232, 0.015), 0 0 0 190px rgba(47, 91, 232, 0.01);
  transform: translate(-50%, -50%);
}

.final-cta .shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta img {
  width: 54px;
  height: 54px;
  margin-bottom: 42px;
}

.final-cta h2 {
  max-width: 990px;
  margin-bottom: 32px;
}

.final-cta p {
  max-width: 620px;
  margin-bottom: 40px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.site-footer {
  padding: 70px 0 42px;
  background: #070a2b;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.footer-brand img {
  width: min(280px, 100%);
  height: auto;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 28px;
  align-content: start;
}

.footer-nav a,
.footer-nav .disabled-page-link {
  color: rgba(236, 241, 250, 0.58);
  font: 500 0.78rem/1.4 "IBM Plex Sans", sans-serif;
  text-decoration: none;
}

.footer-nav .disabled-page-link {
  color: rgba(236, 241, 250, 0.34);
}

.footer-nav a:hover {
  color: var(--paper);
}

.footer-meta {
  grid-column: 1 / 3;
  margin: 10px 0 0;
  padding-top: 28px;
  color: rgba(236, 241, 250, 0.25);
  border-top: 1px solid var(--line);
  font-size: 0.52rem;
}

@keyframes connector-scan {
  0%, 15% { transform: translateX(-110%); opacity: 0; }
  35% { opacity: 1; }
  80%, 100% { transform: translateX(280%); opacity: 0; }
}

@media (max-width: 1020px) {
  .split-intro {
    grid-template-columns: 1fr;
    gap: 38px;
    align-items: start;
  }

  .section-support {
    max-width: 670px;
  }

  .capability-system {
    grid-template-columns: 160px 55px minmax(0, 1fr);
    padding: 32px 24px;
  }

  .chain-stage span {
    font-size: 0.62rem;
  }

  .participant-perspectives {
    grid-template-columns: 1fr 220px 1fr;
    gap: 26px 42px;
  }

  .perspective-core {
    min-height: 560px;
  }

  .core-rings { width: 180px; height: 180px; }
  .core-rings i:nth-child(1) { width: 120px; height: 120px; }
  .core-rings i:nth-child(2) { width: 235px; height: 235px; }
  .core-rings i:nth-child(3) { width: 285px; height: 285px; }

  .materials-grid article {
    min-height: 230px;
  }

  .evidence-system {
    grid-template-columns: 1fr;
  }

  .evidence-orbit {
    width: min(520px, 85vw);
    justify-self: center;
  }

  .journey-tabs {
    grid-template-columns: repeat(4, 1fr);
  }

  .journey-tabs button:nth-child(4) {
    border-right: 0;
  }

  .journey-tabs button:nth-child(n+5) {
    border-top: 1px solid var(--line);
  }

  .journey-panel {
    grid-template-columns: 190px 1fr;
    padding-inline: 32px;
  }

  .journey-record {
    width: 165px;
    height: 165px;
  }
}

@media (max-width: 720px) {
  .split-intro .section-label,
  .section-heading-centered .section-label,
  .intelligence-intro .section-label {
    margin-bottom: 28px;
  }

  .section-heading-centered {
    margin-bottom: 76px;
    text-align: left;
  }

  .section-heading-centered > p:last-child,
  .section-heading-centered > div {
    margin-inline: 0;
  }

  .capability-system {
    grid-template-columns: 1fr;
    grid-template-rows: auto 52px auto auto;
    padding: 24px 18px;
  }

  .supply-input {
    max-width: 230px;
  }

  .input-connector {
    width: 1px;
    height: 52px;
    margin-left: 24px;
  }

  .input-connector span {
    width: 100%;
    height: 42%;
    background: linear-gradient(180deg, transparent, var(--paper), transparent);
    animation-name: connector-scan-mobile;
  }

  .reverse-chain {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .chain-line {
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .chain-line span {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, var(--cobalt), rgba(47,91,232,.2));
  }

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

  .chain-stage {
    min-height: 65px;
    flex-direction: row;
    gap: 18px;
    text-align: left;
  }

  .chain-stage b {
    flex: 0 0 48px;
  }

  .reconciliation-layer {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .reconciliation-layer i {
    display: none;
  }

  .capability-list {
    grid-template-columns: 1fr;
    margin-top: 72px;
  }

  .participant-perspectives {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .perspective-core {
    order: -1;
    width: 100%;
    min-height: 330px;
    margin-bottom: 40px;
  }

  .core-rings i:nth-child(3) {
    width: 270px;
    height: 270px;
  }

  .perspective {
    width: 100%;
  }

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

  .materials-grid article {
    min-height: 210px;
  }

  .config-line {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .intelligence-network {
    min-height: 640px;
  }

  .transaction-focus {
    top: 13%;
    left: 50%;
    width: 126px;
    height: 126px;
    transform: translateX(-50%);
  }

  .intelligence-network svg {
    top: 105px;
    left: -33%;
    width: 130%;
    height: 76%;
    transform: rotate(90deg);
  }

  .network-caption {
    top: auto;
    right: auto;
    bottom: 25px;
    left: 22px;
  }

  .label-1 { left: 8%; top: 37%; }
  .label-2 { right: 6%; top: 39%; }
  .label-3 { left: 17%; top: 56%; }
  .label-4 { right: 13%; top: 59%; }
  .label-5 { left: 9%; bottom: 16%; }
  .label-6 { right: 7%; bottom: 12%; }

  .intelligence-transition {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 110px;
  }

  .intelligence-transition i {
    width: 1px;
    height: 70px;
    margin-left: 12px;
    background: var(--cobalt);
  }

  .intelligence-transition i::after {
    right: -3px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .evidence-flow {
    grid-template-columns: 1fr;
    justify-items: start;
    padding-left: 3px;
  }

  .evidence-flow > div {
    width: 92px;
    height: 92px;
  }

  .evidence-flow > i {
    width: 1px;
    height: 45px;
    margin-left: 45px;
    background: linear-gradient(180deg, rgba(47,91,232,.18), var(--cobalt));
  }

  .evidence-orbit {
    min-height: 337px;
    width: 337px;
    max-width: calc(100vw - 38px);
  }

  .evidence-tag {
    font-size: 0.48rem;
  }

  .ev-2 { right: -2%; }
  .ev-5 { left: -1%; }

  .trust-close {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }

  .journey-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .journey-tabs button {
    min-width: 145px;
    border-top: 0 !important;
    scroll-snap-align: start;
  }

  .journey-panel {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 32px 18px;
  }

  .journey-record {
    width: 150px;
    height: 150px;
    justify-self: center;
  }

  .journey-fields {
    grid-template-columns: 1fr 1fr;
  }

  .journey-status {
    grid-column: 1;
    flex-direction: column;
  }

  .journey-equation {
    justify-content: flex-start;
  }

  .journey-equation strong {
    flex: 1 1 100%;
    margin: 10px 0 0;
  }

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

  .why-close strong {
    font-size: clamp(3.3rem, 14vw, 5rem);
  }

  .final-cta {
    text-align: left;
  }

  .final-cta .shell {
    align-items: flex-start;
  }

  .final-cta .hero-actions {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  .footer-meta {
    grid-column: 1;
  }

  @keyframes connector-scan-mobile {
    0%, 15% { transform: translateY(-110%); opacity: 0; }
    35% { opacity: 1; }
    80%, 100% { transform: translateY(280%); opacity: 0; }
  }
}

@media (max-width: 390px) {
  .capability-list article {
    grid-template-columns: 30px 1fr;
    gap: 14px;
  }

  .materials-grid h3 {
    font-size: 1.75rem;
  }

  .intelligence-network {
    min-height: 610px;
  }

  .journey-fields {
    grid-template-columns: 1fr;
  }

  .journey-tabs button {
    min-width: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .input-connector span,
  .chain-line span,
  .progression-line span {
    animation: none !important;
    transform: none !important;
  }
}

/* Top-level chapters */
.system-page {
  background: var(--midnight-deep);
}

.system-page .site-header {
  background: rgba(9, 12, 52, 0.78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

.system-page .nav-links a[aria-current="page"] {
  position: relative;
  color: var(--paper);
}

.system-page .nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 4px;
  left: 7px;
  height: 1px;
  background: var(--cobalt);
}

.chapter-hero {
  position: relative;
  min-height: max(790px, 92svh);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 150px 0 100px;
  background:
    radial-gradient(circle at 72% 42%, rgba(47, 91, 232, 0.17), transparent 32%),
    linear-gradient(180deg, var(--midnight), var(--midnight-deep));
}

.chapter-grid {
  position: absolute;
  inset: 86px 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(236, 241, 250, 0.041) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 250, 0.041) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.chapter-hero::after {
  content: "";
  position: absolute;
  right: -330px;
  bottom: -520px;
  width: 920px;
  height: 920px;
  border: 1px solid rgba(47, 91, 232, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 110px rgba(47, 91, 232, 0.012), 0 0 0 220px rgba(47, 91, 232, 0.008);
}

.chapter-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: center;
}

.chapter-copy .section-label {
  margin: 0 0 42px;
}

.chapter-copy h1 {
  max-width: 930px;
  margin-bottom: 38px;
  font-size: clamp(3.9rem, 6.1vw, 6.25rem);
  line-height: 0.94;
}

.chapter-copy h1 em {
  color: var(--cobalt);
  font-style: normal;
}

.chapter-copy .page-lede {
  max-width: 700px;
}

.story-section {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 13vw, 190px) 0;
  background: linear-gradient(180deg, var(--midnight-deep), #0c1545);
}

.story-tonal {
  background:
    radial-gradient(circle at 85% 28%, rgba(47, 91, 232, 0.11), transparent 28%),
    linear-gradient(180deg, #0c1545, var(--midnight-deep));
}

.editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}

.editorial-split.compact {
  margin-bottom: clamp(76px, 10vw, 125px);
}

.editorial-split h2,
.wide-heading h2,
.domain-layout h2 {
  max-width: 930px;
  font-size: clamp(3rem, 5.7vw, 5.65rem);
}

.wide-heading {
  margin-bottom: clamp(75px, 10vw, 125px);
}

.wide-heading .section-label,
.editorial-split .section-label,
.domain-layout .section-label {
  margin: 0 0 34px;
}

.editorial-copy {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.65;
}

.system-layers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 56px;
  color: rgba(236, 241, 250, 0.42);
  font: 500 0.62rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
}

.system-layers span,
.system-layers strong {
  padding: 20px;
  border: 1px solid var(--line);
}

.system-layers strong {
  color: var(--paper);
  background: rgba(47, 91, 232, 0.17);
  border-color: rgba(47, 91, 232, 0.45);
  font-weight: 550;
}

.system-layers i {
  width: 1px;
  height: 26px;
  margin: auto;
  background: var(--cobalt);
}

.scope-note,
.content-note {
  max-width: 860px;
  margin: 44px 0 0;
  color: rgba(236, 241, 250, 0.48);
  font: 400 0.78rem/1.65 "IBM Plex Sans", sans-serif;
}

.chapter-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 14vw, 190px) 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(47, 91, 232, 0.2), transparent 38%),
    var(--midnight-deep);
  border-top: 1px solid var(--line);
}

.chapter-cta .shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chapter-cta p {
  margin-bottom: 28px;
  color: rgba(236, 241, 250, 0.45);
  font: 500 0.66rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.15em;
}

.chapter-cta h2 {
  max-width: 930px;
  margin-bottom: 50px;
}

/* Platform */
.platform-hero-visual,
.perspective-visual,
.iq-network,
.understanding-visual {
  position: relative;
  min-height: 470px;
}

.platform-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(47, 91, 232, 0.23);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.platform-orbit.orbit-a { width: 280px; height: 280px; }
.platform-orbit.orbit-b { width: 430px; height: 430px; opacity: 0.58; }

.platform-core {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translate(-50%, -50%);
}

.platform-core img { width: 58px; }
.platform-core span { color: rgba(236, 241, 250, 0.55); font: 500 0.55rem/1.5 "IBM Plex Sans", sans-serif; letter-spacing: 0.13em; text-align: center; }

.signal-node,
.iq-label {
  position: absolute;
  padding: 9px 11px;
  color: rgba(236, 241, 250, 0.6);
  background: rgba(9, 12, 52, 0.88);
  border: 1px solid rgba(47, 91, 232, 0.32);
  border-radius: 5px;
  font: 500 0.55rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.09em;
}

.node-a { top: 8%; left: 34%; }.node-b { top: 38%; right: -2%; }.node-c { right: 15%; bottom: 5%; }.node-d { left: 0; bottom: 24%; }

.lifecycle-map {
  display: grid;
  grid-template-columns: 210px 72px minmax(0, 1fr);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line);
  background: rgba(9, 12, 52, 0.43);
}

.lifecycle-upstream {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(236, 241, 250, 0.16);
}

.lifecycle-upstream span,
.lifecycle-upstream small {
  color: rgba(236, 241, 250, 0.42);
  font: 500 0.52rem/1.45 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.11em;
}

.lifecycle-upstream strong { margin: 14px 0 10px; font-size: 1.05rem; font-weight: 550; }
.lifecycle-feed { height: 1px; overflow: hidden; background: rgba(47, 91, 232, 0.22); }
.lifecycle-feed i { display: block; width: 44%; height: 1px; background: linear-gradient(90deg, transparent, var(--cobalt)); animation: connector-scan 8s linear infinite; }

.lifecycle-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lifecycle-chain::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 5%;
  left: 5%;
  height: 1px;
  background: linear-gradient(90deg, var(--cobalt), rgba(47, 91, 232, 0.25));
}

.lifecycle-chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.lifecycle-chain b { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; color: var(--paper); background: var(--midnight-deep); border: 1px solid rgba(47, 91, 232, 0.55); border-radius: 50%; font-size: 0.62rem; font-weight: 500; }
.lifecycle-chain span { font-size: 0.66rem; }

.function-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.function-rail li { min-height: 270px; padding: 30px 24px; border-right: 1px solid var(--line); }
.function-rail li:last-child { border-right: 0; }
.function-rail span { color: rgba(236, 241, 250, 0.3); font: 500 0.58rem/1 "IBM Plex Sans", sans-serif; }
.function-rail h3 { margin: 75px 0 14px; font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 550; }
.function-rail p { color: rgba(236, 241, 250, 0.5); font-size: 0.82rem; }

.story-data { background: linear-gradient(180deg, #0c1545, #0b103d); }
.data-layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1.28fr); gap: clamp(60px, 9vw, 140px); align-items: center; }
.data-layout .wide-heading { margin: 0; }
.data-constellation { position: relative; min-height: 560px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 115px 40px; border: 1px solid rgba(47, 91, 232, 0.18); border-radius: 50%; }
.data-constellation::before,.data-constellation::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(47, 91, 232, 0.12); border-radius: 50%; pointer-events: none; }.data-constellation::after { inset: 26%; }
.data-constellation > span { position: relative; z-index: 2; padding: 9px 11px; color: rgba(236, 241, 250, 0.58); background: var(--midnight-deep); border: 1px solid var(--line); border-radius: 5px; font: 500 0.6rem/1.2 "IBM Plex Sans", sans-serif; }
.data-core { position: absolute; inset: 50% auto auto 50%; z-index: 3; display: flex; width: 130px; height: 130px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--cobalt); transform: translate(-50%, -50%); box-shadow: 0 0 55px rgba(47, 91, 232, 0.28); }
.data-core span { font: 500 0.52rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.13em; }.data-core strong { margin-top: 8px; font-size: 0.85rem; font-weight: 550; }
.config-list { display: grid; grid-template-columns: 1fr 1fr; margin: 42px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.config-list li { padding: 18px 4px; color: rgba(236, 241, 250, 0.72); border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.config-list li:nth-child(odd) { margin-right: 24px; }

/* Solutions */
.chapter-hero-solutions { background: radial-gradient(circle at 76% 48%, rgba(47, 91, 232, 0.2), transparent 28%), linear-gradient(180deg, var(--midnight), var(--midnight-deep)); }
.perspective-visual { min-height: 510px; }
.perspective-visual::before,.perspective-visual::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 410px; height: 410px; border: 1px solid rgba(47, 91, 232, 0.2); border-radius: 50%; transform: translate(-50%, -50%); }.perspective-visual::after { width: 270px; height: 270px; }
.perspective-hub { position: absolute; inset: 50% auto auto 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 13px; transform: translate(-50%, -50%); }.perspective-hub img { width: 50px; }.perspective-hub span { color: rgba(236, 241, 250, 0.54); font: 500 0.52rem/1.4 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; text-align: center; }
.perspective-visual > i { position: absolute; top: 50%; left: 50%; width: 380px; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 91, 232, 0.48), transparent); transform: translate(-50%, -50%); }.perspective-visual > i:nth-of-type(2) { transform: translate(-50%, -50%) rotate(60deg); }.perspective-visual > i:nth-of-type(3) { transform: translate(-50%, -50%) rotate(-60deg); }
.perspective-visual > span { position: absolute; padding: 8px 10px; color: rgba(236, 241, 250, 0.57); background: var(--midnight-deep); border: 1px solid var(--line); font: 500 0.52rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.09em; }.pv-a{top:7%;left:39%}.pv-b{top:24%;right:-2%}.pv-c{right:0;bottom:18%}.pv-d{bottom:5%;left:36%}.pv-e{bottom:20%;left:-1%}.pv-f{top:23%;left:0}
.roles-intro { padding-bottom: 90px; }.roles-intro .wide-heading { margin-bottom: 0; }
.role-stream { background: var(--midnight-deep); }
.role-entry { padding: clamp(85px, 10vw, 135px) 0; border-top: 1px solid var(--line); }
.role-entry:nth-child(even) { background: rgba(10, 44, 92, 0.13); }
.role-layout { display: grid; grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1.52fr); gap: clamp(50px, 9vw, 140px); }
.role-index { display: flex; flex-direction: column; gap: 22px; color: rgba(236, 241, 250, 0.45); font: 500 0.63rem/1.5 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.role-index span { color: var(--cobalt); }
.role-layout h2 { max-width: 920px; margin-bottom: 28px; font-size: clamp(2.8rem, 5.4vw, 5.3rem); }
.role-layout > div:last-child > p { max-width: 720px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); }
.signal-list,.metric-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 0; padding: 0; list-style: none; }
.signal-list li,.metric-list li { padding: 9px 12px; color: rgba(236, 241, 250, 0.58); border: 1px solid var(--line); border-radius: 5px; font: 500 0.66rem/1.2 "IBM Plex Sans", sans-serif; }

/* Materials */
.chapter-hero-materials { background: radial-gradient(circle at 76% 42%, rgba(10, 44, 92, 0.72), transparent 34%), linear-gradient(180deg, var(--midnight), var(--midnight-deep)); }
.material-spectrum { position: relative; min-height: 470px; }.material-spectrum > span { position: absolute; display: grid; width: 96px; height: 96px; place-items: center; color: rgba(247, 249, 253, 0.75); border: 1px solid rgba(47, 91, 232, 0.35); border-radius: 50%; background: rgba(9, 12, 52, 0.68); font: 500 0.72rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }.material-spectrum > i { position: absolute; top: 50%; left: 5%; width: 90%; height: 1px; background: linear-gradient(90deg, transparent, var(--cobalt), transparent); transform: rotate(-25deg); }.ms-1{top:3%;left:35%}.ms-2{top:27%;right:0}.ms-3{right:8%;bottom:4%}.ms-4{bottom:2%;left:26%}.ms-5{bottom:28%;left:-2%}.ms-6{top:15%;left:5%}
.material-entries { border-top: 1px solid var(--line); }
.material-entries details { border-bottom: 1px solid var(--line); }
.material-entries summary { display: grid; grid-template-columns: 120px 1fr 38px; align-items: center; padding: 34px 4px; cursor: pointer; list-style: none; }.material-entries summary::-webkit-details-marker { display: none; }.material-entries summary > span { color: rgba(236, 241, 250, 0.35); font: 500 0.6rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.material-entries summary h3 { margin: 0; font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 540; }.material-entries summary i { position: relative; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; }.material-entries summary i::before,.material-entries summary i::after { content: ""; position: absolute; top: 13px; left: 8px; width: 10px; height: 1px; background: var(--paper); }.material-entries summary i::after { transform: rotate(90deg); transition: transform 180ms ease; }.material-entries details[open] summary i::after { transform: rotate(0); }
.material-framework { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 0 0 32px 120px; }.material-framework span { min-height: 95px; padding: 19px; color: rgba(236, 241, 250, 0.54); background: rgba(236, 241, 250, 0.025); border: 1px solid var(--line); font: 500 0.62rem/1.45 "IBM Plex Sans", sans-serif; }
.material-close h2 { max-width: 1060px; margin-bottom: 62px; }.material-close h2 span { color: var(--cobalt); }.config-axis { display: flex; align-items: center; gap: 18px; margin-bottom: 50px; color: rgba(236, 241, 250, 0.53); font: 500 0.62rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }.config-axis i { width: 36px; height: 1px; background: var(--cobalt); }

/* Intelligence */
.chapter-hero-intelligence { background: radial-gradient(circle at 78% 48%, rgba(47, 91, 232, 0.22), transparent 31%), linear-gradient(180deg, var(--midnight), #090d35); }
.iq-network svg { width: 100%; height: 100%; overflow: visible; }.iq-links { fill: none; stroke: rgba(47, 91, 232, 0.38); stroke-width: 1; stroke-dasharray: 6 9; }.iq-dots { fill: var(--cobalt); stroke: rgba(236, 241, 250, 0.75); stroke-width: 1; }.iq-record { position: absolute; inset: 50% auto auto 50%; display: flex; width: 128px; height: 128px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(47, 91, 232, 0.66); border-radius: 50%; background: var(--midnight-deep); transform: translate(-50%, -50%); box-shadow: 0 0 0 12px rgba(47, 91, 232, 0.05); }.iq-record span { color: rgba(236, 241, 250, 0.44); font: 500 0.51rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }.iq-record strong { margin-top: 10px; font-size: 1.3rem; font-weight: 550; }.il-a{top:8%;left:11%}.il-b{top:7%;right:3%}.il-c{right:-2%;bottom:16%}.il-d{bottom:6%;left:10%}
.intelligence-progress { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }.intelligence-progress li { position: relative; min-height: 150px; padding: 30px 20px; border-top: 1px solid rgba(47, 91, 232, 0.55); }.intelligence-progress li::after { content: ""; position: absolute; top: -4px; right: 0; width: 7px; height: 7px; border-top: 1px solid var(--cobalt); border-right: 1px solid var(--cobalt); transform: rotate(45deg); }.intelligence-progress span { display: block; margin-bottom: 48px; color: rgba(236, 241, 250, 0.32); font: 500 0.58rem/1 "IBM Plex Sans", sans-serif; }.intelligence-progress strong { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 550; }
.domain-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: clamp(65px, 10vw, 150px); align-items: center; }.domain-layout.reverse { grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); }
.domain-signal { padding: clamp(32px, 5vw, 58px); border: 1px solid var(--line); background: rgba(9, 12, 52, 0.42); }.route-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-bottom: 50px; }.route-map span { display: grid; height: 72px; place-items: center; border: 1px solid rgba(47, 91, 232, 0.36); border-radius: 50%; font: 500 0.55rem/1 "IBM Plex Sans", sans-serif; }.route-map b { width: 30px; height: 1px; background: var(--cobalt); }.route-map > i { display: none; }
.anomaly-field { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; min-height: 400px; place-items: center; padding: 40px; border: 1px solid var(--line); }.anomaly-field span { width: 8px; height: 8px; background: rgba(47, 91, 232, 0.58); border-radius: 50%; box-shadow: 0 0 0 18px rgba(47, 91, 232, 0.025); }.anomaly-field .is-anomaly { background: var(--blood-orange); box-shadow: 0 0 0 14px rgba(255, 51, 51, 0.07); }.anomaly-field small { position: absolute; right: 20px; bottom: 18px; color: rgba(255, 51, 51, 0.72); font: 500 0.53rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }
.market-map-list { display: grid; grid-template-columns: 1fr 1fr; margin: 42px 0 0; padding: 0; list-style: none; }.market-map-list li { padding: 15px 0; color: rgba(236, 241, 250, 0.68); border-bottom: 1px solid var(--line); }.market-map-list span { display: inline-block; width: 36px; color: rgba(236, 241, 250, 0.28); font: 500 0.56rem/1 "IBM Plex Sans", sans-serif; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: clamp(70px, 11vw, 160px); align-items: center; }.report-layout h2 { max-width: 880px; }.report-layout .button { margin-top: 34px; }.report-stack { display: grid; gap: 12px; perspective: 700px; }.report-stack span { padding: 24px; color: rgba(236, 241, 250, 0.55); border: 1px solid var(--line); background: rgba(47, 91, 232, 0.045); font: 500 0.62rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.12em; transform: rotateY(-8deg); }

/* Why MaterialIQ */
.chapter-hero-why { background: radial-gradient(circle at 75% 50%, rgba(10, 44, 92, 0.76), transparent 34%), linear-gradient(180deg, var(--midnight), var(--midnight-deep)); }
.understanding-visual { display: grid; place-items: center; }.understanding-rings { position: absolute; width: 390px; height: 390px; border: 1px solid rgba(47, 91, 232, 0.2); border-radius: 50%; box-shadow: inset 0 0 80px rgba(47, 91, 232, 0.06), 0 0 0 75px rgba(47, 91, 232, 0.015), 0 0 0 150px rgba(47, 91, 232, 0.009); }.understanding-axis { position: relative; z-index: 2; display: grid; grid-template-columns: auto 80px auto; align-items: center; color: rgba(236, 241, 250, 0.46); font: 500 0.58rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.understanding-axis i { height: 1px; background: var(--cobalt); }.understanding-axis strong { color: var(--paper); font-weight: 550; }
.principles { background: var(--midnight-deep); }.principle { padding: clamp(95px, 12vw, 165px) 0; border-top: 1px solid var(--line); }.principle:nth-child(even) { background: rgba(10, 44, 92, 0.12); }.principle-layout { display: grid; grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1.58fr); gap: clamp(50px, 9vw, 140px); }.principle-layout > p { color: rgba(236, 241, 250, 0.45); font: 500 0.62rem/1.6 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }.principle-layout > p span { display: block; margin-bottom: 22px; color: var(--cobalt); }.principle h2 { max-width: 970px; margin-bottom: 26px; font-size: clamp(2.8rem, 5.4vw, 5.25rem); }.principle-layout > div > p { max-width: 690px; color: var(--muted); font-size: 1.05rem; }
.connection-strip,.proof-sequence { display: flex; align-items: center; gap: 14px; margin-top: 48px; color: rgba(236, 241, 250, 0.44); font: 500 0.56rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.09em; }.connection-strip i,.proof-sequence i { width: 42px; height: 1px; background: var(--cobalt); }.connection-strip strong,.proof-sequence strong { padding: 12px; color: var(--paper); background: rgba(47, 91, 232, 0.16); border: 1px solid rgba(47, 91, 232, 0.38); font-weight: 550; }
.understanding-close { padding: clamp(120px, 16vw, 220px) 0; background: radial-gradient(circle at 45% 50%, rgba(47, 91, 232, 0.17), transparent 37%), var(--midnight-deep); }.understanding-close img { width: 48px; margin-bottom: 48px; }.understanding-close p { color: rgba(236, 241, 250, 0.5); font-size: clamp(1.25rem, 2.2vw, 1.9rem); }.understanding-close h2 { max-width: 1000px; margin: 22px 0 54px; font-size: clamp(4rem, 8vw, 8rem); }.understanding-close h2 span { color: var(--cobalt); }

/* Company */
.chapter-hero-company { min-height: 0; padding: clamp(150px,14vw,200px) 0 clamp(90px,9vw,125px); background: radial-gradient(circle at 79% 43%,rgba(47,91,232,.16),transparent 28%),linear-gradient(180deg,var(--midnight),var(--midnight-deep)); }
.company-hero-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
.company-hero-layout .chapter-copy h1 { max-width: 920px; font-size: clamp(3.6rem,5vw,5.2rem); line-height: .97; }
.company-hero-lede { max-width: 880px !important; color: rgba(236,241,250,.68); font-size: clamp(.95rem,1.15vw,1.08rem); line-height: 1.75; }
.company-mark { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; border: 1px solid rgba(47,91,232,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(47,91,232,.012); }.company-mark img { width: 64px; margin-bottom: 16px; }.company-mark span { color: rgba(236,241,250,.52); font: 500 .58rem/1 "IBM Plex Sans",sans-serif; letter-spacing: .14em; }.company-mark i { width: 1px; height: 24px; background: var(--cobalt); }
.company-statements { background: var(--midnight-deep); }.statement-panel { padding: clamp(100px,14vw,190px) 0; border-top: 1px solid var(--line); }.statement-panel:nth-child(2) { background: rgba(10,44,92,.14); }.statement-panel .section-label { margin: 0 0 50px; }.statement-panel blockquote { max-width: 1100px; margin: 0; font-size: clamp(3rem,6vw,6rem); font-weight: 540; letter-spacing: -.052em; line-height: 1; }.statement-panel blockquote span { color: var(--cobalt); }.statement-grid { display: grid; grid-template-columns: 230px 1fr; gap: clamp(50px,8vw,110px); }.statement-grid .section-label { margin: 10px 0 0; }.statement-grid blockquote { font-size: clamp(2.4rem,4.6vw,4.5rem); }
.company-page .statement-panel { padding: clamp(82px,10vw,138px) 0; }
.leadership-section { background: radial-gradient(circle at 82% 15%,rgba(47,91,232,.1),transparent 28%),linear-gradient(180deg,#0c1545,var(--midnight-deep)); }
.company-page .leadership-section { padding: clamp(88px,10vw,140px) 0; }
.leadership-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 50px; align-items: end; margin-bottom: clamp(70px,9vw,120px); }
.company-page .leadership-intro { margin-bottom: clamp(55px,6vw,82px); }
.leadership-intro .section-label { margin: 0 0 34px; }
.leadership-intro h2 { max-width: 950px; font-size: clamp(3rem,5.7vw,5.65rem); }
.leadership-interface-label { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: rgba(236,241,250,.4); font: 500 .58rem/1 "IBM Plex Sans",sans-serif; letter-spacing: .12em; }
.leadership-interface-label span { width: 34px; height: 1px; background: var(--cobalt); }
.leadership-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.leadership-profile { min-height: 570px; padding: clamp(36px,5vw,64px); background: rgba(9,12,52,.96); }
.leadership-profile:nth-child(2),.leadership-profile:nth-child(3) { background: rgba(10,25,72,.94); }
.profile-index { margin: 0 0 clamp(42px,5vw,66px); color: rgba(236,241,250,.35); font: 500 .57rem/1.4 "IBM Plex Sans",sans-serif; letter-spacing: .11em; }
.profile-heading { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: clamp(24px,3vw,38px); align-items: end; margin-bottom: 34px; }
.profile-photo { position: relative; width: 150px; aspect-ratio: 1 / 1.08; overflow: hidden; margin: 0; border: 1px solid rgba(111,145,255,.34); border-radius: 4px; background: rgba(47,91,232,.08); }
.profile-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 55%,rgba(9,12,52,.24)); box-shadow: inset 0 0 28px rgba(14,17,69,.12); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.profile-photo-steve img { object-position: 50% 28%; }.profile-photo-john img { object-position: 50% 35%; }.profile-photo-ian img { object-position: 50% 26%; }.profile-photo-evan img { object-position: 50% 28%; }
.leadership-profile h3 { margin: 0 0 15px; font-size: clamp(2.35rem,3.35vw,3.55rem); font-weight: 540; line-height: .98; }
.profile-role { margin: 0 0 34px; color: #6f91ff; font: 500 .72rem/1.35 "IBM Plex Sans",sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.profile-heading .profile-role { margin-bottom: 3px; }
.profile-bio { max-width: 610px; margin: 0; color: rgba(236,241,250,.64); font-size: clamp(.93rem,1.15vw,1.05rem); line-height: 1.72; }
.company-perspective { padding: clamp(88px,10vw,138px) 0; border-top: 1px solid var(--line); background: linear-gradient(180deg,var(--midnight-deep),#0a123d); }
.company-perspective .section-label { margin: 0 0 clamp(58px,7vw,92px); }
.company-perspective-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); background: rgba(9,12,52,.38); }
.company-perspective-card { min-height: clamp(340px,32vw,430px); padding: clamp(44px,5vw,68px); }
.company-perspective-card + .company-perspective-card { border-left: 1px solid var(--line); }
.company-perspective-card h2 { margin: 0; font-family: "Space Grotesk",sans-serif; font-size: clamp(2.55rem,3.6vw,3.8rem); font-weight: 540; letter-spacing: -.045em; line-height: .98; text-transform: lowercase; }
.company-perspective-card p { max-width: 590px; margin: clamp(28px,3vw,42px) 0 0; color: rgba(236,241,250,.67); font: 400 clamp(1.2rem,1.65vw,1.58rem)/1.48 "Space Grotesk",sans-serif; letter-spacing: -.018em; }
.company-perspective-card p span { color: var(--cobalt); }
.company-positioning { position: relative; overflow: hidden; background: radial-gradient(circle at 83% 55%,rgba(47,91,232,.17),transparent 31%),#0b103d; }
.company-positioning::after { content: ""; position: absolute; right: -240px; bottom: -440px; width: 720px; height: 720px; border: 1px solid rgba(47,91,232,.1); border-radius: 50%; box-shadow: 0 0 0 90px rgba(47,91,232,.007),0 0 0 180px rgba(47,91,232,.004); }
.company-positioning .shell { position: relative; z-index: 1; }
.company-positioning blockquote { font-size: clamp(2.4rem,4.6vw,4.5rem); }
.company-positioning blockquote span { display: block; margin-top: .55em; }
.company-page .company-contact { padding: clamp(88px,10vw,138px) 0; }
.company-contact .section-label { margin: 0 0 32px; font-family: "IBM Plex Sans",sans-serif; font-size: clamp(.88rem,1vw,1.02rem); font-weight: 700; letter-spacing: .12em; line-height: 1.15; }

@media (max-width: 1100px) {
  .chapter-hero-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 45px; }
  .company-hero-layout { grid-template-columns: 1fr; }
  .company-mark { width: min(430px,100%); justify-self: center; }
  .chapter-copy h1 { font-size: clamp(3.7rem, 6.8vw, 5.5rem); }
  .function-rail { grid-template-columns: repeat(3, 1fr); }
  .function-rail li:nth-child(3) { border-right: 0; }.function-rail li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .lifecycle-map { grid-template-columns: 180px 45px 1fr; padding-inline: 25px; }
  .lifecycle-chain { grid-template-columns: repeat(4, 1fr); gap: 22px 8px; }.lifecycle-chain::before { display: none; }
}

@media (max-width: 900px) {
  .chapter-hero { min-height: auto; padding: 160px 0 120px; }
  .chapter-hero-layout { grid-template-columns: 1fr; }
  .platform-hero-visual,.perspective-visual,.iq-network,.understanding-visual,.material-spectrum,.company-mark { width: min(520px, 100%); min-height: 430px; justify-self: center; }
  .editorial-split,.data-layout,.domain-layout,.domain-layout.reverse,.report-layout { grid-template-columns: 1fr; }
  .lifecycle-map { grid-template-columns: 1fr; }.lifecycle-feed { width: 1px; height: 45px; margin-left: 34px; }.lifecycle-feed i { width: 1px; height: 45px; background: linear-gradient(180deg, transparent, var(--cobalt)); animation: none; }
  .role-layout,.principle-layout { grid-template-columns: 180px 1fr; gap: 45px; }
  .material-framework { grid-template-columns: repeat(3, 1fr); }
  .statement-grid { grid-template-columns: 1fr; }.statement-grid .section-label { margin-bottom: 32px; }
  .leadership-intro,.leadership-grid { grid-template-columns: 1fr; }
  .leadership-interface-label { margin: 0; }
}

@media (max-width: 720px) {
  .system-page .nav-links a[aria-current="page"]::after { right: auto; bottom: 7px; left: 0; width: 34px; }
  .chapter-hero { padding: 134px 0 90px; }
  .chapter-copy .section-label { margin-bottom: 30px; }
  .chapter-copy h1 { font-size: clamp(3.05rem, 13.5vw, 4.35rem); line-height: 0.96; }
  .platform-hero-visual,.perspective-visual,.iq-network,.understanding-visual,.material-spectrum,.company-mark { min-height: 345px; }
  .platform-orbit.orbit-a { width: 210px; height: 210px; }.platform-orbit.orbit-b { width: 320px; height: 320px; }
  .signal-node { font-size: 0.48rem; }.node-b { right: 0; }.node-d { left: 0; }
  .story-section { padding: clamp(90px, 25vw, 130px) 0; }
  .editorial-split h2,.wide-heading h2,.domain-layout h2 { font-size: clamp(2.85rem, 12.7vw, 4.2rem); }
  .editorial-split,.domain-layout,.domain-layout.reverse,.role-layout,.principle-layout { grid-template-columns: 1fr; gap: 42px; }
  .lifecycle-chain { grid-template-columns: 1fr; gap: 0; }.lifecycle-chain li { min-height: 62px; flex-direction: row; gap: 18px; text-align: left; }.lifecycle-chain b { flex: 0 0 40px; }.lifecycle-chain::after { content: ""; position: absolute; top: 20px; bottom: 20px; left: 20px; width: 1px; background: linear-gradient(180deg, var(--cobalt), rgba(47,91,232,.15)); }
  .function-rail { grid-template-columns: 1fr; }.function-rail li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }.function-rail li:nth-child(n+4) { border-top: 0; }.function-rail h3 { margin-top: 38px; }
  .data-constellation { min-height: 450px; padding: 90px 22px; border-radius: 16px; }.data-constellation::before,.data-constellation::after { display: none; }.data-core { position: static; width: 100%; height: 80px; flex: 1 1 100%; border-radius: 8px; transform: none; }
  .config-list { grid-template-columns: 1fr; }.config-list li:nth-child(odd) { margin-right: 0; }
  .perspective-visual::before { width: 315px; height: 315px; }.perspective-visual::after { width: 200px; height: 200px; }.perspective-visual > i { width: 300px; }.perspective-visual > span { font-size: 0.45rem; }.pv-a{top:4%;}.pv-d{bottom:3%;}.pv-b{right:0}.pv-c{right:0}.pv-e{left:0}.pv-f{left:0}
  .role-index { gap: 12px; }.role-layout h2,.principle h2 { font-size: clamp(2.8rem, 12.5vw, 4.15rem); }
  .material-spectrum > span { width: 76px; height: 76px; }.material-entries summary { grid-template-columns: 70px 1fr 32px; padding-block: 28px; }.material-framework { grid-template-columns: 1fr; padding-left: 70px; }.material-framework span { min-height: auto; }
  .config-axis { flex-wrap: wrap; align-items: flex-start; }.config-axis i { display: none; }.config-axis span { width: calc(50% - 9px); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .intelligence-progress { grid-template-columns: 1fr; }.intelligence-progress li { min-height: 0; display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 12px; }.intelligence-progress li::after { top: auto; right: auto; bottom: -4px; left: 16px; transform: rotate(135deg); }.intelligence-progress span { margin: 0; }
  .route-map { grid-template-columns: 1fr; gap: 0; }.route-map span { width: 100px; height: 70px; }.route-map b { width: 1px; height: 32px; margin-left: 50px; }
  .anomaly-field { min-height: 330px; padding: 28px 16px; }
  .market-map-list { grid-template-columns: 1fr; }
  .understanding-rings { width: 290px; height: 290px; }.understanding-axis { grid-template-columns: 1fr; gap: 22px; text-align: center; }.understanding-axis i { width: 1px; height: 45px; margin: auto; }
  .connection-strip,.proof-sequence { align-items: flex-start; flex-direction: column; }.connection-strip i,.proof-sequence i { width: 1px; height: 26px; margin-left: 10px; }
  .understanding-close h2 { font-size: clamp(3.35rem, 14vw, 5rem); }
  .company-mark { width: 315px; height: 315px; min-height: 315px; }.statement-panel blockquote,.statement-grid blockquote { font-size: clamp(2.75rem, 12vw, 4.2rem); }
  .company-hero-layout .chapter-copy h1 { font-size: clamp(2.8rem,12vw,3.85rem); }
  .company-hero-lede { font-size: .95rem; line-height: 1.7; }
  .company-perspective-grid { grid-template-columns: 1fr; }
  .company-perspective-card { min-height: 0; padding: 42px 28px 46px; }
  .company-perspective-card + .company-perspective-card { padding: 42px 28px 46px; border-top: 1px solid var(--line); border-left: 0; }
  .company-perspective-card h2 { font-size: clamp(2.35rem,9vw,3rem); }
  .company-perspective-card p { font-size: 1.12rem; }
  .company-contact .section-label { font-size: .84rem; letter-spacing: .11em; }
  .leadership-profile { min-height: 0; padding: 38px 28px 44px; }
  .profile-index { margin-bottom: 58px; }
  .profile-heading { grid-template-columns: 112px minmax(0,1fr); gap: 22px; }
  .profile-photo { width: 112px; }
  .leadership-profile h3 { font-size: clamp(2rem,9.5vw,2.7rem); }
  .chapter-cta h2 { font-size: clamp(3rem, 13vw, 4.5rem); }
}

@media (max-width: 390px) {
  .chapter-copy h1 { font-size: 3.05rem; }
  .platform-hero-visual,.perspective-visual,.iq-network,.understanding-visual,.material-spectrum { transform: scale(0.92); transform-origin: center; }
  .material-entries summary { grid-template-columns: 58px 1fr 30px; }.material-framework { padding-left: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .lifecycle-feed i { animation: none !important; }
}

/* Expanded Platform chapter */
.platform-page-expanded h2 {
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.platform-expanded-hero {
  min-height: 0;
  padding: clamp(150px, 14vw, 205px) 0 clamp(82px, 8vw, 118px);
  background:
    radial-gradient(circle at 72% 42%, rgba(47, 91, 232, 0.15), transparent 34%),
    linear-gradient(180deg, var(--midnight), var(--midnight-deep));
}

.platform-expanded-hero .chapter-hero-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.platform-expanded-hero .chapter-copy {
  max-width: 1080px;
}

.platform-expanded-hero .chapter-copy h1 {
  max-width: 1020px;
  font-size: clamp(3.7rem, 5.7vw, 5.85rem);
}

.platform-expanded-hero .chapter-copy .page-lede {
  max-width: 780px;
}

.platform-expanded-hero .chapter-copy h1 em {
  position: relative;
  display: inline-block;
  color: var(--cobalt);
  font-weight: 600;
}

.platform-expanded-hero .chapter-copy h1 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.02em;
  left: 0;
  height: 1px;
  background: rgba(47, 91, 232, 0.72);
}

.intelligence-vocabulary {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 13px;
  margin: 35px 0 0;
  color: rgba(236, 241, 250, 0.58);
  font: 500 0.66rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.intelligence-vocabulary i { color: var(--cobalt); font-style: normal; }

.platform-spine-visual {
  position: relative;
  min-height: 520px;
}

.spine-line {
  position: absolute;
  top: 12%;
  bottom: 11%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(47, 91, 232, 0.72) 24%, rgba(47, 91, 232, 0.2) 86%, transparent);
}

.spine-line i {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--cobalt), transparent);
  animation: platform-spine-flow 8s linear infinite;
}

.spine-line b {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(236, 241, 250, 0.7);
  border-radius: 50%;
  background: var(--cobalt);
  transform: translate(-50%, -50%);
}

.spine-line b:nth-of-type(1) { top: 14%; }
.spine-line b:nth-of-type(2) { top: 35%; }
.spine-line b:nth-of-type(3) { top: 66%; }
.spine-line b:nth-of-type(4) { top: 88%; }

.spine-assurance {
  position: absolute;
  top: 3%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.spine-assurance span,
.spine-assurance strong,
.spine-label {
  font: 500 0.54rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.spine-assurance span { color: rgba(236, 241, 250, 0.36); }
.spine-assurance strong { color: rgba(236, 241, 250, 0.76); font-weight: 550; }

.spine-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 138px;
  height: 138px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid rgba(47, 91, 232, 0.55);
  border-radius: 50%;
  background: rgba(9, 12, 52, 0.94);
  box-shadow: 0 0 0 18px rgba(47, 91, 232, 0.035), 0 0 70px rgba(47, 91, 232, 0.17);
  transform: translate(-50%, -50%);
}

.spine-core img { width: 42px; }
.spine-core span { color: rgba(236, 241, 250, 0.62); font: 500 0.53rem/1.45 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; text-align: center; }

.spine-label {
  position: absolute;
  padding: 10px 12px;
  color: rgba(236, 241, 250, 0.57);
  background: rgba(9, 12, 52, 0.88);
  border: 1px solid rgba(47, 91, 232, 0.28);
  border-radius: 5px;
}

.spine-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.08), rgba(47, 91, 232, 0.5));
}

.sl-a { top: 16%; left: 2%; }.sl-a::after,.sl-d::after { left: 100%; }
.sl-b { top: 29%; right: 0; }.sl-b::after,.sl-c::after,.sl-e::after { right: 100%; transform: rotate(180deg); }
.sl-c { top: 60%; right: -3%; }
.sl-d { bottom: 13%; left: 4%; }
.sl-e { right: 8%; bottom: 2%; }

@keyframes platform-spine-flow {
  from { transform: translateY(-30%); }
  to { transform: translateY(430%); }
}

.journey-section {
  background:
    radial-gradient(circle at 76% 65%, rgba(47, 91, 232, 0.13), transparent 30%),
    linear-gradient(180deg, var(--midnight-deep), #0c1545);
}

.journey-section .wide-heading .page-lede { max-width: 760px; margin-top: 34px; }

.platform-source-graphic {
  position: relative;
  margin: 0;
}

.platform-source-graphic::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 68% 42%, rgba(47, 91, 232, 0.16), transparent 46%);
  filter: blur(22px);
}

.platform-source-graphic-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(47, 91, 232, 0.34);
  border-radius: var(--radius-sm);
  background: var(--midnight-deep);
  box-shadow: 0 30px 90px rgba(4, 7, 30, 0.28), inset 0 0 0 1px rgba(236, 241, 250, 0.025);
}

.platform-source-graphic-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.value-chain-architecture {
  border: 1px solid var(--line);
  background: rgba(9, 12, 52, 0.52);
  box-shadow: 0 30px 80px rgba(4, 7, 30, 0.18);
}

.architecture-assurance {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(24px, 4vw, 48px);
  color: rgba(236, 241, 250, 0.45);
  border-bottom: 1px solid var(--line);
  font: 500 0.57rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.architecture-assurance i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(47, 91, 232, 0.2), var(--cobalt), rgba(47, 91, 232, 0.2)); }
.architecture-assurance strong { color: var(--paper); font-weight: 550; }

.chain-groups {
  display: grid;
  grid-template-columns: minmax(255px, 0.32fr) 72px minmax(620px, 0.68fr);
  align-items: stretch;
  padding: clamp(28px, 4vw, 50px);
}

.supply-chain-group,
.recovery-chain-group { padding: clamp(24px, 3vw, 38px); }

.supply-chain-group {
  align-self: center;
  color: rgba(236, 241, 250, 0.65);
  border: 1px solid rgba(236, 241, 250, 0.11);
  background: rgba(10, 44, 92, 0.17);
}

.recovery-chain-group {
  border: 1px solid rgba(47, 91, 232, 0.36);
  background: linear-gradient(135deg, rgba(47, 91, 232, 0.18), rgba(10, 44, 92, 0.1));
  box-shadow: inset 0 0 70px rgba(47, 91, 232, 0.035);
}

.chain-group-label { margin-bottom: 40px; }
.chain-group-label span { color: rgba(236, 241, 250, 0.4); font: 500 0.53rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.12em; }
.chain-group-label h3 { margin: 12px 0 0; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 540; }
.recovery-chain-group .chain-group-label span { color: rgba(47, 91, 232, 0.95); }

.material-chain {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-chain-supply { grid-template-columns: repeat(2, 1fr); }
.material-chain-recovery { grid-template-columns: repeat(7, 1fr); gap: 7px; }

.material-chain li {
  position: relative;
  display: flex;
  min-height: 98px;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px;
  border-top: 1px solid rgba(47, 91, 232, 0.5);
  background: rgba(9, 12, 52, 0.34);
}

.material-chain li::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 2;
  color: var(--cobalt);
  font-size: 0.7rem;
  transform: translateY(-50%);
}

.material-chain li:last-child::after { display: none; }
.material-chain b { color: rgba(236, 241, 250, 0.28); font: 500 0.53rem/1 "IBM Plex Sans", sans-serif; }
.material-chain span { font-size: 0.68rem; line-height: 1.35; }
.material-chain-recovery li { min-height: 125px; border-color: rgba(47, 91, 232, 0.65); background: rgba(9, 12, 52, 0.52); }

.chain-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(236, 241, 250, 0.32);
  font: 500 0.45rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
}

.chain-transition i { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(47, 91, 232, 0.12), var(--cobalt)); }

.supply-positioning {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 9vw, 130px);
  margin-top: clamp(70px, 9vw, 120px);
}

.supply-positioning .section-label { margin: 0 0 24px; }
.supply-positioning p:not(.section-label) { color: var(--muted); font-size: 1.05rem; }
.supply-positioning ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.supply-positioning li { padding: 18px 14px 18px 0; color: rgba(236, 241, 250, 0.62); border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.supply-positioning li:nth-child(odd) { margin-right: 22px; }

.participants-layout,
.platform-dual-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: clamp(70px, 10vw, 150px);
  align-items: center;
}

.participants-copy h2,
.platform-dual-layout h2 { max-width: 820px; font-size: clamp(3rem, 5.5vw, 5.4rem); }
.participants-copy .editorial-copy,.platform-dual-layout .editorial-copy { margin-top: 30px; }

.participant-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 35px;
}

.participant-context span {
  padding: 8px 10px;
  color: rgba(236, 241, 250, 0.48);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 500 0.6rem/1 "IBM Plex Sans", sans-serif;
}

.participant-network {
  position: relative;
  min-height: 620px;
  display: grid;
  align-items: center;
  border: 1px solid rgba(47, 91, 232, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 100px rgba(47, 91, 232, 0.035), 0 0 0 50px rgba(47, 91, 232, 0.01);
}

.participant-network::before,.participant-network::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(47, 91, 232, 0.11); border-radius: 50%; }.participant-network::after { inset: 32%; }
.participant-network ul { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 90px; margin: 0; padding: 46px 25px; list-style: none; }
.participant-network li { display: flex; min-height: 42px; align-items: center; padding: 10px; color: rgba(236, 241, 250, 0.61); background: var(--midnight-deep); border: 1px solid var(--line); font: 500 0.59rem/1.3 "IBM Plex Sans", sans-serif; }
.participant-network li:nth-child(odd) { justify-content: flex-end; text-align: right; }
.participant-hub { position: absolute; top: 50%; left: 50%; z-index: 3; display: flex; width: 125px; height: 125px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 50%; background: var(--cobalt); transform: translate(-50%, -50%); box-shadow: 0 0 48px rgba(47, 91, 232, 0.25); }
.participant-hub img { width: 37px; }.participant-hub span { font: 500 0.48rem/1.4 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; text-align: center; }

.platform-function-rail { border-bottom: 1px solid var(--line); }
.platform-function-rail li { min-height: 255px; }
.platform-function-rail h3 { margin-top: 0; }

.product-experience-section {
  background:
    radial-gradient(circle at 12% 28%, rgba(47, 91, 232, 0.13), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(10, 44, 92, 0.46), transparent 31%),
    linear-gradient(180deg, #090d35, #0c1545);
}

.product-experience-heading { max-width: 1120px; }
.product-experience-heading h2 { max-width: 1080px; }
.product-experience-heading .page-lede { max-width: 760px; margin-top: 32px; }

.product-field-story {
  border-top: 1px solid rgba(47, 91, 232, 0.5);
}

.product-story-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-story-label span {
  color: rgba(236, 241, 250, 0.76);
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  font-weight: 620;
}
.product-story-label strong {
  color: #6f91ff;
  font-size: clamp(1.15rem, 1.75vw, 1.55rem);
  font-weight: 620;
}

.product-mobile-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.product-mobile-step {
  min-width: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 42px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 12, 52, 0.38);
}

.product-screen {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-screen::after { display: none; }

.product-screen img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.product-screen-mobile { max-width: 330px; margin: 0 auto; }

.product-mobile-step figcaption { padding-top: 30px; }
.product-mobile-step figcaption > span,
.product-desktop-view figcaption > span {
  display: block;
  margin-bottom: 16px;
  color: #6f91ff;
  font: 500 0.57rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.product-mobile-step h3 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  font-weight: 540;
  line-height: 1.04;
}

.product-mobile-step p,
.product-desktop-view figcaption p,
.product-admin-copy > p:last-child {
  margin: 0;
  color: rgba(236, 241, 250, 0.58);
  font-size: 0.9rem;
  line-height: 1.65;
}

.product-admin-story {
  margin-top: clamp(100px, 12vw, 165px);
  padding-top: clamp(80px, 9vw, 125px);
  border-top: 1px solid rgba(47, 91, 232, 0.5);
}

.product-admin-copy {
  display: grid;
  grid-template-columns: 210px minmax(0, 1.15fr) minmax(260px, 0.65fr);
  gap: clamp(35px, 6vw, 85px);
  align-items: start;
}

.product-admin-copy .section-label { margin: 10px 0 0; }
.product-admin-copy h3 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-weight: 540;
  letter-spacing: -0.052em;
  line-height: 0.98;
}
.product-admin-copy > p:last-child { max-width: 420px; padding-top: 10px; }

.product-desktop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(65px, 8vw, 105px);
  border: 1px solid var(--line);
  background: var(--line);
}

.product-desktop-view {
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  background: rgba(9, 12, 52, 0.94);
}

.product-desktop-view:nth-child(2) { background: rgba(10, 25, 72, 0.94); }
.product-desktop-view figcaption { padding: 28px 8px 4px; }
.product-desktop-view figcaption > span {
  font-size: 0.86rem;
  font-weight: 620;
}
.product-desktop-view figcaption p { max-width: 580px; }

.platform-capabilities-section {
  background:
    radial-gradient(circle at 78% 38%, rgba(47, 91, 232, 0.12), transparent 31%),
    linear-gradient(180deg, #0c1545, var(--midnight-deep));
}

.platform-capabilities-section .wide-heading { margin-bottom: clamp(60px, 8vw, 95px); }

.platform-capabilities-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(47, 91, 232, 0.48);
  border-left: 1px solid var(--line);
}

.platform-capability-block {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  padding: clamp(28px, 3.5vw, 46px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 12, 52, 0.34);
}

.platform-capability-block > span {
  color: rgba(236, 241, 250, 0.3);
  font: 500 0.58rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.11em;
}

.platform-capability-block h3 {
  max-width: 300px;
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 2.8vw, 2.65rem);
  font-weight: 550;
  letter-spacing: -0.045em;
  line-height: 1;
}

.platform-capability-block p {
  margin: 0;
  color: rgba(236, 241, 250, 0.58);
  font-size: 0.9rem;
  line-height: 1.65;
}

.finance-section { background: radial-gradient(circle at 75% 45%, rgba(47, 91, 232, 0.13), transparent 30%), linear-gradient(180deg, #0c1545, var(--midnight-deep)); }
.physical-financial { display: flex; align-items: center; gap: 16px; margin-top: 44px; color: rgba(236, 241, 250, 0.54); font: 500 0.62rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.physical-financial i { width: 48px; height: 1px; background: var(--cobalt); }
.finance-visual { padding: clamp(28px, 4vw, 46px); border: 1px solid rgba(47, 91, 232, 0.24); background: rgba(9, 12, 52, 0.45); }
.operating-sequence { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(47, 91, 232, 0.5); list-style: none; }
.operating-sequence li { position: relative; min-height: 130px; padding: 24px 14px; border-right: 1px solid var(--line); }
.operating-sequence li:last-child { border-right: 0; }.operating-sequence li::after { content: "→"; position: absolute; top: -10px; right: -4px; color: var(--cobalt); background: #0b1240; font-size: 0.65rem; }
.operating-sequence li:last-child::after { display: none; }.operating-sequence span { display: block; margin-bottom: 47px; color: rgba(236, 241, 250, 0.3); font: 500 0.52rem/1 "IBM Plex Sans", sans-serif; }.operating-sequence strong { font-size: 0.8rem; font-weight: 550; }
.relationship-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }.relationship-examples p { width: 100%; margin-bottom: 8px; color: rgba(236, 241, 250, 0.36); font: 500 0.52rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.relationship-examples span { padding: 8px 10px; color: rgba(236, 241, 250, 0.5); border: 1px solid var(--line); border-radius: 4px; font: 500 0.58rem/1.2 "IBM Plex Sans", sans-serif; }

.workflow-layout { grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr); }
.workflow-record { position: relative; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(47, 91, 232, 0.22); background: rgba(9, 12, 52, 0.46); }
.record-header { display: flex; flex-direction: column; gap: 8px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }.record-header span,.workflow-record li span { color: rgba(236, 241, 250, 0.35); font: 500 0.51rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.record-header strong { font-size: 1rem; font-weight: 540; }
.record-spine { position: absolute; top: 112px; bottom: 50px; left: 64px; width: 1px; background: rgba(47, 91, 232, 0.28); }.record-spine i { display: block; width: 1px; height: 42%; background: linear-gradient(180deg, transparent, var(--cobalt)); animation: connector-scan 8s linear infinite; }.record-spine b { position: absolute; left: 50%; width: 7px; height: 7px; border: 1px solid var(--cobalt); border-radius: 50%; background: var(--midnight-deep); transform: translate(-50%, -50%); }.record-spine b:nth-of-type(1){top:12%}.record-spine b:nth-of-type(2){top:50%}.record-spine b:nth-of-type(3){top:88%}
.workflow-record ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0 0 0 48px; list-style: none; }.workflow-record li { display: flex; min-height: 74px; flex-direction: column; justify-content: center; gap: 9px; padding: 15px 18px; border: 1px solid var(--line); background: rgba(236, 241, 250, 0.018); }.workflow-record li strong { color: rgba(236, 241, 250, 0.7); font-size: 0.8rem; font-weight: 500; }

.mass-balance-section { background: radial-gradient(circle at 73% 50%, rgba(47, 91, 232, 0.2), transparent 34%), linear-gradient(180deg, #0b103d, #091035); }
.balance-radial { position: absolute; right: -320px; top: 50%; width: 860px; height: 860px; border: 1px solid rgba(47, 91, 232, 0.1); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 90px rgba(47, 91, 232, 0.008), 0 0 0 180px rgba(47, 91, 232, 0.005); }
.balance-system { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr); border: 1px solid rgba(47, 91, 232, 0.28); background: rgba(9, 12, 52, 0.58); }
.balance-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.balance-flow li { position: relative; display: flex; min-height: 150px; flex-direction: column; justify-content: space-between; padding: 25px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.balance-flow li:nth-child(4n) { border-right: 0; }.balance-flow li:nth-child(n+5) { border-bottom: 0; }.balance-flow span { color: rgba(236, 241, 250, 0.28); font: 500 0.55rem/1 "IBM Plex Sans", sans-serif; }.balance-flow strong { max-width: 130px; font-size: 0.78rem; font-weight: 530; line-height: 1.35; }.balance-flow li::after { content: "→"; position: absolute; right: -5px; bottom: 27px; z-index: 2; color: var(--cobalt); font-size: 0.65rem; }.balance-flow li:nth-child(4)::after { content: "↙"; right: 18px; bottom: -8px; }.balance-flow li:last-child::after { display: none; }
.balance-question { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 58px); border-left: 1px solid rgba(47, 91, 232, 0.3); background: rgba(47, 91, 232, 0.09); }.balance-question span { color: rgba(236, 241, 250, 0.4); font: 500 0.53rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.balance-question strong { margin: 27px 0; color: var(--paper); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 550; letter-spacing: -0.05em; line-height: 0.95; }.balance-question p { color: var(--muted); font-size: 0.88rem; }
.balance-support,.supported-outcomes { display: flex; flex-wrap: wrap; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }.balance-support span,.supported-outcomes span { padding: 18px 22px; color: rgba(236, 241, 250, 0.58); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 0.63rem/1.2 "IBM Plex Sans", sans-serif; }

.reporting-section .editorial-split { margin-bottom: clamp(75px, 9vw, 120px); }
.reporting-field { position: relative; display: grid; grid-template-columns: 180px 1fr; align-items: stretch; border: 1px solid rgba(47, 91, 232, 0.2); background: rgba(9, 12, 52, 0.43); }
.reporting-core { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; color: var(--paper); background: var(--cobalt); }.reporting-core span { font: 500 0.52rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.reporting-core strong { font-size: 1.25rem; font-weight: 550; line-height: 1.1; }
.analysis-output-list { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; margin: 0; padding: 38px; list-style: none; }.analysis-output-list li { padding: 9px 11px; color: rgba(236, 241, 250, 0.57); border: 1px solid var(--line); border-radius: 4px; font: 500 0.62rem/1.2 "IBM Plex Sans", sans-serif; }
.supported-outcomes { align-items: center; }.supported-outcomes p { padding: 18px 22px 18px 0; color: rgba(236, 241, 250, 0.35); font: 500 0.55rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }

.auditability-section { background: radial-gradient(circle at 82% 44%, rgba(47, 91, 232, 0.16), transparent 28%), linear-gradient(180deg, var(--midnight-deep), #0c1545); }
.scrutiny-list { display: grid; grid-template-columns: 1fr 1fr; margin: 38px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.scrutiny-list li { padding: 15px 2px; color: rgba(236, 241, 250, 0.58); border-bottom: 1px solid var(--line); font-size: 0.84rem; }.scrutiny-list li:nth-child(odd) { margin-right: 22px; }
.assurance-sequence { position: relative; display: grid; margin: 0; padding: 28px; border: 1px solid rgba(47, 91, 232, 0.23); background: rgba(9, 12, 52, 0.5); list-style: none; }.assurance-sequence::before { content: ""; position: absolute; top: 65px; bottom: 65px; left: 55px; width: 1px; background: linear-gradient(180deg, var(--cobalt), rgba(47, 91, 232, 0.2)); }.assurance-sequence li { position: relative; display: grid; min-height: 75px; grid-template-columns: 54px 1fr; align-items: center; border-bottom: 1px solid var(--line); }.assurance-sequence li:last-child { border-bottom: 0; }.assurance-sequence span { position: relative; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; color: rgba(236, 241, 250, 0.65); background: var(--midnight-deep); border: 1px solid rgba(47, 91, 232, 0.65); border-radius: 50%; font: 500 0.5rem/1 "IBM Plex Sans", sans-serif; }.assurance-sequence strong { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 540; }.assurance-sequence li:last-child strong { color: var(--cobalt); }

.architecture-summary-section { background: linear-gradient(180deg, #0c1545, var(--midnight-deep)); }
.architecture-summary-section .wide-heading { margin-bottom: 70px; }
.platform-architecture { display: grid; gap: 12px; }
.architecture-layer,.architecture-operating { border: 1px solid var(--line); background: rgba(9, 12, 52, 0.5); }
.architecture-layer > p,.architecture-operating > p { margin: 0; padding: 14px 20px; color: rgba(236, 241, 250, 0.36); border-bottom: 1px solid var(--line); font: 500 0.53rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }
.architecture-intelligence { border-color: rgba(47, 91, 232, 0.45); background: rgba(47, 91, 232, 0.12); }.architecture-intelligence > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px clamp(20px, 4vw, 46px); color: var(--paper); font: 550 clamp(0.72rem, 1.2vw, 1rem)/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.11em; }.architecture-intelligence i { color: var(--cobalt); font-style: normal; }
.architecture-chains { display: grid; grid-template-columns: 0.3fr 0.7fr; gap: 12px; padding: 12px; }.architecture-supply,.architecture-recovery { padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line); }.architecture-supply { align-self: center; color: rgba(236, 241, 250, 0.58); background: rgba(10, 44, 92, 0.15); }.architecture-recovery { border-color: rgba(47, 91, 232, 0.34); background: linear-gradient(135deg, rgba(47, 91, 232, 0.16), rgba(10, 44, 92, 0.12)); }.architecture-supply > span,.architecture-recovery > span { color: rgba(236, 241, 250, 0.37); font: 500 0.51rem/1 "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; }.architecture-recovery > span { color: rgba(47, 91, 232, 0.95); }.architecture-chains ol { display: flex; align-items: stretch; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }.architecture-chains li { position: relative; flex: 1; padding-top: 13px; border-top: 1px solid rgba(47, 91, 232, 0.52); font-size: 0.66rem; }.architecture-chains li::after { content: "→"; position: absolute; top: 10px; right: -12px; color: var(--cobalt); }.architecture-chains li:last-child::after { display: none; }
.architecture-operating > div { display: grid; grid-template-columns: repeat(4, 1fr); }.architecture-operating span { min-height: 78px; display: flex; align-items: center; padding: 20px; color: rgba(236, 241, 250, 0.62); border-right: 1px solid var(--line); font-size: 0.74rem; }.architecture-operating span:last-child { border-right: 0; }

.integrations-section { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(47,91,232,.16), transparent 34%), linear-gradient(180deg, rgba(10,44,92,.18), rgba(14,17,69,.04)); }
.integrations-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(236,241,250,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(236,241,250,.035) 1px, transparent 1px); background-size: 64px 64px; }
.integrations-heading { position: relative; z-index: 1; max-width: 970px; }
.integrations-heading .page-lede { max-width: 880px; }
.integration-network { position: relative; z-index: 1; min-height: 700px; margin-top: clamp(3rem,6vw,5.25rem); isolation: isolate; }
.integration-network::before { content: ""; position: absolute; inset: 14% 20%; z-index: -2; border-radius: 50%; background: radial-gradient(circle,rgba(47,91,232,.19),rgba(47,91,232,0) 67%); filter: blur(10px); }
.integration-network-links { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.integration-network-links marker path { fill: #6f91ff; }
.integration-path { fill: none; stroke: rgba(111,145,255,.78); stroke-width: 1.35; stroke-dasharray: 7 9; marker-start: url(#integration-arrow); marker-end: url(#integration-arrow); animation: integration-path-flow 16s linear infinite; }
.path-financial,.path-crm { animation-direction: reverse; }
.integration-data-pulse { fill: var(--paper); opacity: .9; }
.pulse-two,.pulse-four { fill: #6f91ff; }
.integration-system-card { position: absolute; display: flex; width: min(27%,320px); min-height: 245px; flex-direction: column; align-items: center; justify-content: center; padding: 30px 24px; text-align: center; border: 1px solid rgba(111,145,255,.36); border-radius: 22px; background: linear-gradient(145deg,rgba(9,12,52,.82),rgba(10,18,66,.6)); box-shadow: inset 0 1px 0 rgba(247,249,253,.035),0 20px 60px rgba(2,6,32,.17); }
.integration-sales { top: 0; left: 0; }.integration-financial { top: 0; right: 0; }.integration-crm { bottom: 0; left: 0; }.integration-operations { right: 0; bottom: 0; }
.integration-system-icon { display: grid; width: 72px; height: 72px; margin-bottom: 20px; place-items: center; border: 1px solid rgba(111,145,255,.45); border-radius: 50%; background: rgba(47,91,232,.055); }
.integration-system-icon svg { width: 39px; height: 39px; fill: none; stroke: #6f91ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.integration-system-card h3 { max-width: 250px; margin: 0; color: var(--paper); font-size: clamp(1.2rem,2vw,1.65rem); font-weight: 520; line-height: 1.12; }
.integration-system-card > i { width: 28px; height: 1px; margin: 18px 0; background: #6f91ff; box-shadow: 0 0 12px rgba(111,145,255,.55); }
.integration-system-card p { margin: 0; color: rgba(236,241,250,.68); font-size: clamp(.82rem,1.25vw,1rem); line-height: 1.52; }
.integration-materialiq-hub { position: absolute; top: 50%; left: 50%; display: flex; width: min(42%,500px); min-height: 245px; flex-direction: column; align-items: center; justify-content: center; padding: 34px; transform: translate(-50%,-50%); border: 1px solid rgba(79,119,249,.88); border-radius: 26px; background: linear-gradient(145deg,rgba(11,20,75,.96),rgba(8,12,52,.96)); box-shadow: 0 0 0 1px rgba(47,91,232,.14),0 0 55px rgba(47,91,232,.23),inset 0 0 65px rgba(47,91,232,.08); animation: integration-hub-breathe 6s ease-in-out infinite; }
.integration-materialiq-hub img { width: min(300px,78%); height: auto; }
.integration-live { display: flex; align-items: center; gap: 8px; margin-bottom: 25px; color: rgba(236,241,250,.53); font: 500 .56rem/1 "IBM Plex Sans",sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.integration-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--blood-orange); box-shadow: 0 0 12px rgba(255,51,51,.7); animation: integration-status 2.8s ease-in-out infinite; }
.integration-hub-functions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 27px; }
.integration-hub-functions span { color: rgba(236,241,250,.66); font: 500 .56rem/1 "IBM Plex Sans",sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.integration-hub-functions span:not(:last-child)::after { content: "·"; margin-left: 14px; color: #6f91ff; }
@keyframes integration-path-flow { to { stroke-dashoffset: -256; } }
@keyframes integration-hub-breathe { 0%,100% { box-shadow: 0 0 0 1px rgba(47,91,232,.14),0 0 45px rgba(47,91,232,.17),inset 0 0 55px rgba(47,91,232,.06); } 50% { box-shadow: 0 0 0 1px rgba(47,91,232,.2),0 0 68px rgba(47,91,232,.29),inset 0 0 72px rgba(47,91,232,.1); } }
@keyframes integration-status { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes integration-mobile-pulse { 0% { top: -41px; opacity: 0; } 25% { opacity: 1; } 100% { top: -4px; opacity: 0; } }
.integration-close { position: relative; z-index: 1; max-width: 900px; margin: clamp(3rem,6vw,5rem) auto 0; color: var(--paper); font-size: clamp(1.55rem,3vw,2.55rem); line-height: 1.18; text-align: center; }
.integration-close strong { color: #6f91ff; font-weight: 500; }

.platform-final-cta .shell { align-items: flex-start; }
.platform-final-cta h2 span { color: var(--cobalt); }
.platform-final-cta .cta-support { max-width: 680px; margin: -18px 0 42px; color: var(--muted); font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.6 "Space Grotesk", sans-serif; letter-spacing: 0; }
.platform-final-cta .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1180px) {
  .chain-groups { grid-template-columns: 240px 48px minmax(0, 1fr); padding-inline: 26px; }
  .material-chain-recovery { grid-template-columns: repeat(4, 1fr); }
  .material-chain-recovery li:nth-child(4)::after { display: none; }
  .participant-network { min-height: 560px; }
}

@media (max-width: 900px) {
  .platform-expanded-hero .chapter-copy h1 { max-width: 780px; }
  .platform-spine-visual { width: min(520px, 100%); min-height: 470px; justify-self: center; }
  .chain-groups { grid-template-columns: 1fr; gap: 0; }
  .chain-transition { min-height: 72px; flex-direction: row; }.chain-transition i { flex: 1; }
  .supply-chain-group { width: min(470px, 100%); justify-self: start; }
  .material-chain-recovery { grid-template-columns: repeat(4, 1fr); }
  .supply-positioning,.participants-layout,.platform-dual-layout,.workflow-layout { grid-template-columns: 1fr; }
  .participant-network { width: min(620px, 100%); justify-self: center; }
  .workflow-record { order: 2; }
  .product-mobile-sequence { grid-template-columns: 1fr; }
  .product-mobile-step { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 70px); align-items: center; }
  .product-mobile-step figcaption { padding-top: 0; }
  .product-admin-copy { grid-template-columns: 1fr; gap: 28px; }
  .product-admin-copy .section-label { margin: 0 0 8px; }
  .product-admin-copy > p:last-child { padding-top: 0; }
  .product-desktop-grid { grid-template-columns: 1fr; }
  .platform-capabilities-row { grid-template-columns: 1fr; }
  .platform-capability-block { min-height: 320px; }
  .integration-network { display: grid; min-height: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 18px; }
  .integration-network::before { inset: 0 8%; }
  .integration-network-links { display: none; }
  .integration-materialiq-hub,.integration-system-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; transform: none; }
  .integration-materialiq-hub { grid-column: 1 / -1; order: 0; min-height: 250px; }
  .integration-system-card { min-height: 250px; }
  .integration-sales { order: 1; }.integration-financial { order: 2; }.integration-crm { order: 3; }.integration-operations { order: 4; }
  .integration-system-card::before { content: ""; position: absolute; top: -43px; left: 50%; width: 1px; height: 42px; background: repeating-linear-gradient(to bottom,rgba(111,145,255,.8) 0 5px,transparent 5px 10px); }
  .integration-system-card::after { content: ""; position: absolute; top: -41px; left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #6f91ff; box-shadow: 0 0 12px rgba(111,145,255,.8); animation: integration-mobile-pulse 3.6s linear infinite; }
  .balance-system { grid-template-columns: 1fr; }.balance-question { border-top: 1px solid rgba(47, 91, 232, 0.3); border-left: 0; }
}

@media (max-width: 720px) {
  .platform-expanded-hero .chapter-copy h1 { font-size: clamp(2.95rem, 12.4vw, 4rem); }
  .platform-expanded-hero .chapter-copy h1 br { display: none; }
  .intelligence-vocabulary { max-width: 330px; }
  .platform-spine-visual { min-height: 390px; transform: none; }
  .spine-core { width: 112px; height: 112px; }.spine-core img { width: 34px; }.spine-label { font-size: 0.46rem; }.spine-label::after { width: 24px; }.sl-a{left:0}.sl-b{right:0}.sl-c{right:0}.sl-d{left:0}.sl-e{right:0}
  .architecture-assurance { align-items: flex-start; flex-direction: column; }.architecture-assurance i { width: 100%; flex: 0 0 1px; }
  .platform-source-graphic-frame { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: rgba(47, 91, 232, 0.62) rgba(236, 241, 250, 0.06); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .platform-source-graphic-frame img { width: 860px; max-width: none; }
  .chain-groups { padding: 18px; }.supply-chain-group,.recovery-chain-group { padding: 24px 20px; }
  .material-chain-supply,.material-chain-recovery { grid-template-columns: 1fr; gap: 0; }
  .material-chain li,.material-chain-recovery li { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; border-top: 0; border-left: 1px solid rgba(47, 91, 232, 0.55); background: transparent; }
  .material-chain li::after,.material-chain-recovery li:nth-child(4)::after { top: auto; right: auto; bottom: -7px; left: 11px; display: block; transform: rotate(90deg); }.material-chain li:last-child::after { display: none; }
  .material-chain b { width: 28px; }
  .supply-positioning ul { grid-template-columns: 1fr; }.supply-positioning li:nth-child(odd) { margin-right: 0; }
  .participants-copy h2,.platform-dual-layout h2 { font-size: clamp(2.75rem, 12.5vw, 4.1rem); }
  .participant-network { min-height: auto; display: block; padding: 20px; border-radius: 10px; }.participant-network::before,.participant-network::after { display: none; }.participant-hub { position: static; width: 100%; height: 96px; flex-direction: row; transform: none; border-radius: 6px; }.participant-network ul { grid-template-columns: 1fr; gap: 7px; padding: 12px 0 0; }.participant-network li:nth-child(odd) { justify-content: flex-start; text-align: left; }
  .platform-function-rail li { min-height: 0; }.platform-function-rail h3 { margin-top: 0; }
  .product-story-label { align-items: flex-start; flex-direction: column; gap: 8px; }
  .product-mobile-step { display: block; padding: 28px 22px 34px; }
  .product-screen-mobile { max-width: 300px; }
  .product-mobile-step figcaption { padding-top: 26px; }
  .product-admin-story { margin-top: 95px; padding-top: 78px; }
  .product-admin-copy h3 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .product-desktop-grid { margin-top: 58px; }
  .product-desktop-view { padding: 18px 14px 28px; }
  .product-desktop-view figcaption { padding: 24px 8px 0; }
  .platform-capability-block { min-height: 0; padding: 28px 24px 32px; }.platform-capability-block h3 { margin: 0 0 22px; }
  .integration-network { grid-template-columns: 1fr; gap: 42px; }
  .integration-materialiq-hub { grid-column: auto; padding-inline: 24px; }
  .integration-materialiq-hub img { width: min(250px,82%); }
  .integration-system-card { min-height: 230px; }
  .operating-sequence { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid rgba(47, 91, 232, 0.5); }.operating-sequence li { min-height: 72px; display: grid; grid-template-columns: 38px 1fr; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }.operating-sequence span { margin: 0; }.operating-sequence li::after { top: auto; right: auto; bottom: -8px; left: -4px; transform: rotate(90deg); }
  .physical-financial { align-items: flex-start; flex-direction: column; }.physical-financial i { width: 1px; height: 28px; }
  .record-spine { left: 52px; }.workflow-record ul { padding-left: 36px; }
  .balance-flow { grid-template-columns: 1fr; }.balance-flow li { min-height: 74px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line) !important; }.balance-flow li:last-child { border-bottom: 0 !important; }.balance-flow strong { max-width: none; }.balance-flow li::after,.balance-flow li:nth-child(4)::after { right: auto; bottom: -8px; left: 19px; content: "→"; transform: rotate(90deg); }.balance-question strong { font-size: 3.2rem; }
  .balance-support span,.supported-outcomes span { flex: 1 1 50%; padding-inline: 12px; }
  .reporting-field { grid-template-columns: 1fr; }.reporting-core { min-height: 120px; }.analysis-output-list { padding: 22px; }
  .scrutiny-list { grid-template-columns: 1fr; }.scrutiny-list li:nth-child(odd) { margin-right: 0; }
  .architecture-intelligence > div { flex-wrap: wrap; justify-content: flex-start; line-height: 1.8; }.architecture-chains { grid-template-columns: 1fr; }.architecture-chains ol { flex-direction: column; gap: 0; }.architecture-chains li { min-height: 48px; padding: 15px 0 0 22px; border-top: 0; border-left: 1px solid rgba(47, 91, 232, 0.52); }.architecture-chains li::after { top: auto; right: auto; bottom: -6px; left: -4px; transform: rotate(90deg); }.architecture-operating > div { grid-template-columns: 1fr; }.architecture-operating span { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--line); }.architecture-operating span:last-child { border-bottom: 0; }
  .platform-final-cta .cta-row { width: 100%; }.platform-final-cta .button { width: 100%; }
}

@media (max-width: 390px) {
  .platform-expanded-hero .chapter-copy h1 { font-size: 2.9rem; }
  .spine-label { padding: 8px; }
  .participant-network { padding: 14px; }
  .finance-visual,.workflow-record,.assurance-sequence { padding: 22px 18px; }
  .record-spine { left: 40px; }.workflow-record ul { padding-left: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .spine-line i,
  .record-spine i,
  .integration-path,
  .integration-materialiq-hub,
  .integration-live b,
  .integration-system-card::after { animation: none !important; }
  .integration-data-pulse { display: none; }
}

/* Section label system */
.section-label {
  display: inline-flex;
  width: fit-content;
  min-height: 48px;
  align-items: center;
  padding: 12px 20px 12px 14px;
  color: #ff3333;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.24), rgba(10, 44, 92, 0.12));
  border: 1px solid rgba(47, 91, 232, 0.46);
  border-left: 4px solid var(--cobalt);
  border-radius: 0 5px 5px 0;
  box-shadow: inset 0 0 28px rgba(47, 91, 232, 0.055), 0 8px 28px rgba(9, 12, 52, 0.16);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.section-label::before {
  width: 42px;
  height: 4px;
  flex: 0 0 42px;
  margin: 0 14px 0 0;
  background: var(--cobalt);
  border-radius: 999px;
  box-shadow: 0 0 15px rgba(47, 91, 232, 0.56);
}

.home-materials .section-label {
  color: #ff3333;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.16), rgba(47, 91, 232, 0.055));
  border-color: rgba(47, 91, 232, 0.34);
}

.chapter-cta .section-label {
  margin-bottom: 32px;
  color: #ff3333;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .section-label {
    min-height: 44px;
    padding: 10px 14px 10px 11px;
    font-size: 0.84rem;
    letter-spacing: 0.11em;
  }

  .section-label::before {
    width: 30px;
    height: 3px;
    flex-basis: 30px;
    margin-right: 11px;
  }
}

.section-label,
.home-materials .section-label,
.chapter-cta .section-label {
  color: #ff3333;
}

/* How We Can Help */
.help-page h2 span {
  color: var(--cobalt);
}

.help-hero {
  min-height: 0;
  padding: clamp(155px, 14vw, 205px) 0 clamp(100px, 10vw, 145px);
  background:
    radial-gradient(circle at 78% 43%, rgba(47, 91, 232, 0.19), transparent 30%),
    linear-gradient(180deg, var(--midnight), var(--midnight-deep));
}

.help-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
  gap: clamp(60px, 8vw, 125px);
  align-items: center;
}

.help-hero .chapter-copy h1 {
  max-width: 880px;
  font-size: clamp(4rem, 6vw, 6.2rem);
}

.help-hero-copy {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1rem, 1.28vw, 1.14rem);
  line-height: 1.72;
}

.help-hero-copy p {
  margin: 0 0 16px;
}

.help-hero-copy p:last-child {
  margin-bottom: 0;
}

.help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 42px;
}

.help-signal-map {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(47, 91, 232, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(47, 91, 232, 0.055), 0 0 0 70px rgba(47, 91, 232, 0.01);
}

.help-signal-map::before,
.help-signal-map::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(47, 91, 232, 0.14);
  border-radius: 50%;
}

.help-signal-map::after {
  inset: 33%;
  border-color: rgba(47, 91, 232, 0.22);
}

.help-signal-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  width: 150px;
  height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--paper);
  background: var(--cobalt);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(47, 91, 232, 0.34);
  transform: translate(-50%, -50%);
}

.help-signal-core img {
  width: 38px;
}

.help-signal-core span,
.help-signal-node {
  font: 600 0.54rem/1.35 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.11em;
  text-align: center;
}

.help-signal-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.18), rgba(47, 91, 232, 0.75));
  transform-origin: left center;
}

.help-signal-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--cobalt);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(47, 91, 232, 0.65);
}

.help-signal-line.line-a { transform: rotate(-48deg); }
.help-signal-line.line-b { transform: rotate(40deg); }
.help-signal-line.line-c { transform: rotate(137deg); }
.help-signal-line.line-d { transform: rotate(221deg); }

.help-signal-node {
  position: absolute;
  z-index: 2;
  max-width: 150px;
  padding: 10px 12px;
  color: rgba(236, 241, 250, 0.68);
  background: rgba(9, 12, 52, 0.94);
  border: 1px solid rgba(47, 91, 232, 0.35);
  border-radius: 5px;
}

.node-materials { top: 13%; right: 3%; }
.node-pricing { right: 4%; bottom: 13%; }
.node-markets { bottom: 13%; left: 2%; }
.node-commercial { top: 13%; left: 1%; }

.help-problem-section {
  background:
    radial-gradient(circle at 90% 18%, rgba(47, 91, 232, 0.08), transparent 25%),
    linear-gradient(180deg, var(--midnight-deep), #0c1545);
}

.help-problem-section .wide-heading .page-lede,
.help-participants-section .wide-heading .page-lede {
  max-width: 860px;
  margin-top: 28px;
}

.help-problem-section .wide-heading .page-lede + .page-lede {
  margin-top: 14px;
}

.help-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.help-problem-card {
  min-height: 390px;
  padding: clamp(32px, 4vw, 54px);
  background: rgba(9, 12, 52, 0.94);
}

.help-problem-card:nth-child(2),
.help-problem-card:nth-child(3) {
  background: rgba(10, 25, 72, 0.94);
}

.help-problem-card-wide {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(60px, 7vw, 110px);
  align-items: start;
}

.help-problem-card-wide > div {
  min-width: 0;
  padding-left: clamp(22px, 3vw, 44px);
  border-left: 1px solid var(--line);
}

.help-problem-card > span,
.help-capability-heading > span,
.help-participant > span {
  color: #6f91ff;
  font: 600 0.58rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.help-problem-card h3 {
  max-width: 490px;
  margin: 0 0 24px;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  font-weight: 540;
  letter-spacing: -0.045em;
  line-height: 1;
}

.help-problem-card p {
  max-width: 620px;
  margin: 0 0 14px;
  color: rgba(236, 241, 250, 0.62);
  line-height: 1.72;
}

.help-problem-card-wide h3 {
  min-width: 0;
  max-width: 420px;
  margin: 0;
}

.help-problem-card-wide p:first-of-type {
  margin-top: 0;
}

.help-principle {
  max-width: 900px;
  margin: 42px 0 30px;
  padding: 28px 30px;
  background: linear-gradient(90deg, rgba(47, 91, 232, 0.15), rgba(10, 44, 92, 0.06));
  border: 1px solid rgba(47, 91, 232, 0.3);
  border-left: 4px solid var(--cobalt);
}

.help-capabilities-section .wide-heading { margin-bottom: 0; }

.help-stakeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(52px, 7vw, 86px);
  border: 1px solid var(--line);
  background: var(--line);
}

.help-stakeholder {
  min-height: 290px;
  padding: clamp(32px, 4vw, 54px);
  background: rgba(9, 12, 52, 0.94);
}

.help-stakeholder:nth-child(2),
.help-stakeholder:nth-child(3),
.help-stakeholder:nth-child(6) {
  background: rgba(10, 25, 72, 0.94);
}

.help-stakeholder:last-child {
  grid-column: 1 / -1;
  min-height: 0;
}

.help-stakeholder h3 {
  max-width: 560px;
  margin: 0 0 24px;
  font-size: clamp(1.75rem, 2.65vw, 2.55rem);
  font-weight: 540;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.help-stakeholder p {
  max-width: 700px;
  margin: 0;
  color: rgba(236, 241, 250, 0.62);
  font-size: 0.96rem;
  line-height: 1.66;
}

.help-principle p {
  margin: 0 0 8px;
  color: rgba(236, 241, 250, 0.52);
  font: 500 0.68rem/1.4 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.help-principle strong {
  display: block;
  max-width: 790px;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 520;
  line-height: 1.34;
}

.help-capability-list {
  border-top: 1px solid var(--line);
}

.help-capability {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(55px, 9vw, 140px);
  padding: clamp(75px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--line);
}

.help-capability-heading h3 {
  max-width: 560px;
  margin: 36px 0 24px;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-weight: 540;
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.help-capability-heading p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.72;
}

.help-application-list,
.help-question-list {
  align-self: end;
}

.help-application-list > p,
.help-question-list > p {
  margin: 0 0 18px;
  color: rgba(236, 241, 250, 0.42);
  font: 600 0.58rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.help-application-list ul,
.help-question-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.help-application-list li,
.help-question-list li {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  padding: 16px 18px 16px 28px;
  color: rgba(236, 241, 250, 0.68);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.help-application-list li:nth-child(odd),
.help-question-list li:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.help-application-list li::before,
.help-question-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  width: 7px;
  height: 7px;
  background: var(--cobalt);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(47, 91, 232, 0.5);
}

.help-participants-section {
  background:
    radial-gradient(circle at 10% 78%, rgba(47, 91, 232, 0.08), transparent 26%),
    linear-gradient(180deg, #0c1545, var(--midnight-deep));
}

.help-participant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.help-participant {
  min-height: 310px;
  padding: clamp(28px, 3.4vw, 44px);
  background: rgba(9, 12, 52, 0.95);
}

.help-participant:nth-child(even) {
  background: rgba(10, 25, 72, 0.95);
}

.help-participant h3 {
  margin: 54px 0 18px;
  font-size: clamp(1.65rem, 2.5vw, 2.45rem);
  font-weight: 540;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.help-participant p {
  margin: 0;
  color: rgba(236, 241, 250, 0.58);
  font-size: 0.94rem;
  line-height: 1.66;
}

.help-participant-wide {
  grid-column: span 3;
  min-height: 0;
  display: grid;
  grid-template-columns: 70px minmax(250px, 0.65fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.help-participant-wide h3,
.help-participant-wide p {
  margin: 0;
}

.help-engagement-section {
  padding: clamp(110px, 14vw, 190px) 0;
  background:
    radial-gradient(circle at 83% 50%, rgba(47, 91, 232, 0.16), transparent 31%),
    #0b103d;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.help-engagement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(70px, 11vw, 165px);
  align-items: start;
}

.help-engagement-layout .section-label {
  margin: 0 0 38px;
}

.help-engagement-layout h2 {
  max-width: 700px;
  font-size: clamp(3rem, 5.6vw, 5.6rem);
}

.help-engagement-copy {
  padding-top: 84px;
}

.help-engagement-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.72;
}

.help-engagement-copy strong {
  display: block;
  margin-top: 38px;
  color: var(--paper);
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  font-weight: 530;
  line-height: 1.12;
}

.help-form-section {
  padding: clamp(110px, 14vw, 190px) 0;
  background:
    linear-gradient(rgba(236, 241, 250, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 250, 0.025) 1px, transparent 1px),
    var(--midnight-deep);
  background-size: 88px 88px;
  scroll-margin-top: 80px;
}

.help-form-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(70px, 10vw, 145px);
  align-items: start;
}

.help-form-intro {
  position: sticky;
  top: 130px;
}

.help-form-intro .section-label {
  margin: 0 0 36px;
  color: #ff3333;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.help-form-intro h2 {
  margin-bottom: 30px;
  font-size: clamp(3rem, 5.3vw, 5.35rem);
}

.help-form-intro > p {
  max-width: 520px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.help-form-note {
  max-width: 500px;
  margin-top: 46px;
  padding: 24px;
  background: rgba(47, 91, 232, 0.09);
  border: 1px solid rgba(47, 91, 232, 0.25);
}

.help-form-note span {
  color: #6f91ff;
  font: 600 0.56rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.help-form-note p {
  margin: 13px 0 0;
  color: rgba(236, 241, 250, 0.62);
  font-size: 0.9rem;
  line-height: 1.6;
}

.help-lead-form {
  position: relative;
  padding: clamp(28px, 4.5vw, 58px);
  background: rgba(10, 25, 72, 0.76);
  border: 1px solid rgba(47, 91, 232, 0.28);
  box-shadow: 0 30px 90px rgba(2, 6, 32, 0.2);
}

.help-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.help-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-field-wide {
  grid-column: 1 / -1;
}

.help-field label,
.help-choice-group legend {
  color: rgba(236, 241, 250, 0.74);
  font: 600 0.73rem/1.3 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.035em;
}

.help-field label span {
  margin-left: 6px;
  color: rgba(236, 241, 250, 0.36);
  font-size: 0.59rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.help-field input,
.help-field select,
.help-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  color: var(--paper);
  background: rgba(9, 12, 52, 0.72);
  border: 1px solid rgba(236, 241, 250, 0.18);
  border-radius: 5px;
  font: 400 0.95rem/1.5 "Space Grotesk", sans-serif;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.help-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(236, 241, 250, 0.65) 50%), linear-gradient(135deg, rgba(236, 241, 250, 0.65) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.help-field textarea {
  min-height: 180px;
  resize: vertical;
}

.help-field input::placeholder,
.help-field textarea::placeholder {
  color: rgba(236, 241, 250, 0.32);
}

.help-field input:focus,
.help-field select:focus,
.help-field textarea:focus {
  background-color: rgba(9, 12, 52, 0.94);
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(47, 91, 232, 0.14);
}

.help-choice-group {
  margin: 38px 0;
  padding: 0;
  border: 0;
}

.help-choice-group legend {
  margin-bottom: 16px;
}

.help-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.help-checkbox-grid label,
.help-radio-row label {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  color: rgba(236, 241, 250, 0.62);
  background: rgba(9, 12, 52, 0.48);
  border: 1px solid rgba(236, 241, 250, 0.12);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.83rem;
}

.help-checkbox-grid input,
.help-radio-row input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--cobalt);
}

.help-checkbox-grid label:has(input:checked),
.help-radio-row label:has(input:checked) {
  color: var(--paper);
  background: rgba(47, 91, 232, 0.13);
  border-color: rgba(47, 91, 232, 0.5);
}

.help-connect-group {
  margin-bottom: 30px;
}

.help-radio-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-submit {
  border: 0;
  cursor: pointer;
}

.help-submit:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.help-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.help-form-status {
  max-width: 620px;
  margin: 22px 0 0;
  padding: 15px 17px;
  color: var(--paper);
  background: rgba(47, 91, 232, 0.12);
  border: 1px solid rgba(47, 91, 232, 0.45);
  border-radius: 5px;
  font: 500 0.83rem/1.6 "IBM Plex Sans", sans-serif;
  outline: none;
}

.help-form-status.is-error {
  background: rgba(255, 51, 51, 0.08);
  border-color: rgba(255, 51, 51, 0.48);
}

.help-form-success {
  min-height: 480px;
  align-content: center;
  padding: clamp(12px, 3vw, 28px);
  outline: none;
}

.help-form-success > span {
  display: block;
  margin-bottom: 26px;
  color: var(--blood-orange);
  font: 600 0.66rem/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
}

.help-form-success h3 {
  max-width: 650px;
  margin: 0 0 24px;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 540;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.help-form-success p {
  max-width: 590px;
  margin: 0 0 36px;
  color: rgba(236, 241, 250, 0.64);
  line-height: 1.7;
}

.help-lead-form.is-complete > :not(.help-form-success) {
  display: none;
}

.help-thank-you {
  min-height: 100vh;
}

.help-thank-you .chapter-copy {
  max-width: 980px;
}

.help-thank-you .chapter-copy > p:not(.section-label) {
  max-width: 680px;
  margin: 30px 0 38px;
  color: rgba(236, 241, 250, 0.68);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
}

.help-submit-note {
  max-width: 590px;
  margin: 18px 0 0;
  color: rgba(236, 241, 250, 0.42);
  font: 400 0.72rem/1.6 "IBM Plex Sans", sans-serif;
}

.help-direct-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  margin-top: clamp(70px, 9vw, 110px);
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

.help-direct-contact p {
  margin: 0 0 8px;
  color: var(--paper);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 530;
}

.help-direct-contact span {
  color: rgba(236, 241, 250, 0.54);
}

.help-direct-contact .button {
  flex: 0 0 auto;
  cursor: pointer;
}

.help-direct-contact .button span {
  color: var(--blood-orange);
  font-weight: 700;
}

.contact-modal[hidden] {
  display: none;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 30, 0.82);
  backdrop-filter: blur(12px);
}

.contact-modal-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  padding: clamp(38px, 6vw, 70px);
  background:
    radial-gradient(circle at 100% 0, rgba(47, 91, 232, 0.22), transparent 42%),
    linear-gradient(145deg, #101951, var(--midnight-deep));
  border: 1px solid rgba(47, 91, 232, 0.48);
  border-left: 4px solid var(--cobalt);
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.contact-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  padding: 0;
  color: rgba(236, 241, 250, 0.72);
  background: transparent;
  border: 1px solid rgba(236, 241, 250, 0.2);
  border-radius: 50%;
  cursor: pointer;
  font: 300 1.9rem/1 "Space Grotesk", sans-serif;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.contact-modal-close:hover,
.contact-modal-close:focus-visible {
  color: var(--paper);
  background: rgba(47, 91, 232, 0.16);
  border-color: rgba(47, 91, 232, 0.7);
}

.contact-modal-eyebrow {
  margin: 0 0 24px;
  color: var(--blood-orange);
  font: 700 0.78rem/1.2 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.14em;
}

.contact-modal-panel h2 {
  max-width: 560px;
  margin: 0 0 28px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
}

.contact-modal-panel > p:not(.contact-modal-eyebrow) {
  max-width: 560px;
  margin: 0 0 38px;
  color: rgba(236, 241, 250, 0.72);
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.72;
}

.contact-modal-panel a:not(.button) {
  color: var(--paper);
  font-weight: 600;
  text-decoration-color: var(--cobalt);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.contact-modal-return {
  width: fit-content;
}

.help-closing {
  padding: clamp(120px, 16vw, 215px) 0;
  background:
    radial-gradient(circle at 65% 80%, rgba(47, 91, 232, 0.2), transparent 38%),
    var(--midnight-deep);
}

.help-closing h2 {
  max-width: 1060px;
  font-size: clamp(3.5rem, 7vw, 7.2rem);
}

.help-closing .help-principle {
  margin: 0 0 46px;
}

.help-closing-copy {
  max-width: 720px;
  margin: -15px 0 46px;
}

.help-closing-copy p {
  margin: 0 0 12px;
  color: var(--muted);
  font: 400 clamp(1rem, 1.35vw, 1.18rem)/1.68 "Space Grotesk", sans-serif;
  letter-spacing: 0;
}

@media (max-width: 1100px) {
  .help-hero-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 45px;
  }

  .help-signal-map {
    min-height: 430px;
  }

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

  .help-participant-wide {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .help-hero-layout,
  .help-engagement-layout,
  .help-form-layout {
    grid-template-columns: 1fr;
  }

  .help-signal-map {
    width: min(520px, 100%);
    min-height: 520px;
    justify-self: center;
  }

  .help-problem-card-wide {
    grid-template-columns: 1fr;
  }

  .help-problem-card-wide > div,
  .help-problem-card-wide p {
    grid-column: auto;
  }

  .help-problem-card-wide > div {
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .help-capability {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .help-engagement-copy {
    max-width: 720px;
    padding-top: 0;
  }

  .help-form-intro {
    position: static;
  }
}

@media (max-width: 720px) {
  .help-hero {
    padding: 134px 0 95px;
  }

  .help-hero .chapter-copy h1 {
    font-size: clamp(3.05rem, 13.2vw, 4.3rem);
  }

  .help-actions,
  .help-actions .button {
    width: 100%;
  }

  .help-signal-map {
    min-height: 340px;
    margin-top: 34px;
  }

  .help-signal-core {
    width: 116px;
    height: 116px;
  }

  .help-signal-core img {
    width: 30px;
  }

  .help-signal-node {
    padding: 8px;
    font-size: 0.45rem;
  }

  .help-problem-grid,
  .help-participant-grid {
    grid-template-columns: 1fr;
  }

  .help-stakeholder-grid { grid-template-columns: 1fr; }
  .help-stakeholder { min-height: 0; padding: 30px 24px 34px; }
  .help-stakeholder:last-child { grid-column: 1; }
  .help-stakeholder h3 { font-size: clamp(1.55rem, 7vw, 1.95rem); }

  .help-problem-card,
  .help-participant {
    min-height: 0;
  }

  .help-problem-card h3 { margin: 0 0 20px; }

  .help-problem-card-wide,
  .help-participant-wide {
    grid-column: 1;
    display: block;
  }

  .help-problem-card-wide h3 { margin: 0 0 20px; }
  .help-participant-wide h3 { margin: 46px 0 20px; }

  .help-application-list ul,
  .help-question-list ul,
  .help-form-grid,
  .help-checkbox-grid,
  .help-radio-row {
    grid-template-columns: 1fr;
  }

  .help-application-list li:nth-child(odd),
  .help-question-list li:nth-child(odd) {
    border-right: 0;
  }

  .help-capability-heading h3 {
    font-size: clamp(2.8rem, 12.5vw, 4.1rem);
  }

  .help-engagement-layout h2,
  .help-form-intro h2 {
    font-size: clamp(3rem, 12.5vw, 4.1rem);
  }

  .help-lead-form {
    padding: 28px 20px 34px;
  }

  .help-direct-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .help-direct-contact .button,
  .help-submit {
    width: 100%;
  }

  .contact-modal {
    padding: 14px;
  }

  .contact-modal-panel {
    padding: 56px 24px 32px;
  }

  .contact-modal-return {
    width: 100%;
  }

  .help-closing h2 {
    font-size: clamp(3.25rem, 13.2vw, 4.7rem);
  }
}

@media (min-width: 1021px) and (max-width: 1120px) {
  .nav {
    gap: 16px;
  }

  .brand {
    width: 150px;
  }

  .nav-panel {
    gap: 9px;
  }

  .nav-links a,
  .nav-links .disabled-page-link {
    padding-inline: 4px;
    font-size: 0.7rem;
  }

  .nav-cta {
    padding-inline: 10px;
    font-size: 0.72rem;
  }
}