@font-face {
  font-family: Oxanium;
  src: url("../fonts/oxanium-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Oxanium;
  src: url("../fonts/oxanium-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --navy: #050b14;
  --navy-2: #071523;
  --white: #f4f7fb;
  --slate: #8ea1b8;
  --cyan: #23d5ff;
  --lime: #b8f34a;
  --rail: color-mix(in srgb, var(--cyan) 36%, transparent);
  font-family: Manrope, Arial, sans-serif;
  color: var(--white);
  background: var(--navy);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 74% 17%, #09253a 0, transparent 28%),
    radial-gradient(ellipse at 30% 76%, #071827 0, transparent 31%), var(--navy);
  line-height: 1.48;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.23;
  background-image:
    linear-gradient(
      90deg,
      transparent 49.92%,
      color-mix(in srgb, var(--cyan) 20%, transparent) 50%,
      transparent 50.08%
    ),
    linear-gradient(
      0deg,
      transparent 49.92%,
      color-mix(in srgb, var(--cyan) 12%, transparent) 50%,
      transparent 50.08%
    );
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}
button,
a {
  outline-offset: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lime);
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
}
.site-header,
footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(30px, 3.3vw, 54px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
}
.brand svg {
  display: block;
  width: 306px;
  height: auto;
}
.site-header nav,
footer nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.9vw, 44px);
}
.site-header nav > a {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.site-header nav > a svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}
.site-header nav button,
.primary-action {
  border: 0;
  background: var(--cyan);
  color: var(--navy);
  padding: 15px 20px;
  font-family: Oxanium, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  clip-path: polygon(0 0, 95% 0, 100% 16%, 100% 100%, 0 100%);
  display: inline-flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.site-header nav button svg,
.hero-actions svg {
  width: 20px;
}
.stage {
  position: relative;
  max-width: 1536px;
  margin: auto;
  padding: clamp(46px, 5.4vw, 84px) clamp(30px, 3.3vw, 54px);
}
h1,
h2,
h3 {
  margin: 0;
  font-family: Oxanium, sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.11;
}
h1 {
  font-size: clamp(45px, 4.35vw, 69px);
  max-width: 12.2ch;
}
h2 {
  font-size: clamp(39px, 3.65vw, 59px);
}
p {
  color: var(--slate);
  font-size: clamp(16px, 1.3vw, 19px);
  max-width: 48ch;
}
.hero {
  min-height: 744px;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 20px;
  align-items: center;
  padding-top: 38px;
  padding-bottom: 20px;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
.hero-copy p {
  line-height: 1.72;
  margin: 28px 0 0;
}
.hero-actions {
  display: flex;
  gap: 28px;
  margin-top: 37px;
}
.primary-action {
  min-width: 290px;
}
.secondary-action {
  border: 1px solid color-mix(in srgb, var(--white) 65%, transparent);
  padding: 14px 20px;
  font-family: Oxanium, sans-serif;
  font-size: 14px;
  display: inline-flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  clip-path: polygon(0 0, 95% 0, 100% 16%, 100% 100%, 0 100%);
}
.topology {
  position: relative;
  height: 590px;
  background-image: radial-gradient(
    color-mix(in srgb, var(--cyan) 62%, transparent) 1px,
    transparent 1.3px
  );
  background-size: 16px 16px;
  background-position: center;
  isolation: isolate;
}
.topology:before,
.topology:after {
  content: "";
  position: absolute;
  inset: 3% 5%;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  clip-path: polygon(
    10% 0,
    90% 0,
    100% 12%,
    100% 88%,
    90% 100%,
    10% 100%,
    0 88%,
    0 12%
  );
  z-index: -1;
}
.topology:after {
  inset: 18% 18%;
  border-style: dashed;
  opacity: 0.75;
}
.topology-rails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.topology-traces path {
  stroke: var(--cyan);
  stroke-width: 2;
  opacity: 0.95;
}
.topology-traces path + path {
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.54;
}
.topology-junctions rect {
  fill: var(--cyan);
  stroke: none;
}
.topology-nodes {
  position: absolute;
  inset: 0;
}
.topology-module {
  position: absolute;
  width: 132px;
  height: 116px;
  padding: 14px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--white) 63%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--navy) 77%, #10293b),
    color-mix(in srgb, var(--navy) 93%, #10293b)
  );
  clip-path: polygon(
    12% 0,
    88% 0,
    100% 15%,
    100% 85%,
    88% 100%,
    12% 100%,
    0 85%,
    0 15%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}
.topology-module svg {
  width: 37px;
  height: 37px;
  color: var(--white);
}
.topology-module b {
  font-family: Oxanium, sans-serif;
  font-size: 13px;
  line-height: 1.2;
}
.topology-module i {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--navy);
  font-style: normal;
  font-weight: 700;
}
.topology-module:hover {
  border-color: var(--cyan);
  transform: translateY(-4px);
}
.topology-module.is-active {
  border-color: var(--lime);
  color: var(--white);
  background: linear-gradient(135deg, #142a24, #07150f);
  box-shadow: 0 16px 32px #0008;
}
.topology-module.is-active svg {
  color: var(--lime);
}
.module--nw {
  left: 7%;
  top: 4%;
}
.module--ne {
  right: 7%;
  top: 4%;
}
.module--west {
  left: 3%;
  top: 34%;
}
.module--east {
  right: 3%;
  top: 34%;
}
.module--sw {
  left: 7%;
  bottom: 11%;
}
.module--se {
  right: 7%;
  bottom: 11%;
}
.module--southwest {
  left: 25%;
  bottom: 1%;
}
.module--southeast {
  right: 25%;
  bottom: 1%;
}
.topology-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 310px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 1;
}
.core-shell {
  position: absolute;
  inset: 0;
  border: 1px solid var(--cyan);
  clip-path: polygon(
    12% 0,
    88% 0,
    100% 12%,
    100% 88%,
    88% 100%,
    12% 100%,
    0 88%,
    0 12%
  );
}
.core-shell--outer {
  transform: scale(1.17);
  opacity: 0.45;
}
.core-shell--outer-2 {
  transform: scale(1.11);
  opacity: 0.75;
  border-color: var(--cyan);
}
.core-shell--mid {
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--white) 64%, transparent);
}
.core-shell--inner {
  inset: 19px;
  background: linear-gradient(135deg, #071a29, #050b14 70%);
  box-shadow: inset 0 0 0 7px #07192a;
}
.core-circuit {
  position: absolute;
  inset: 31px;
  border: 1px dashed color-mix(in srgb, var(--cyan) 65%, transparent);
  clip-path: inherit;
}
.core-port {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--cyan);
  border: 4px solid #071827;
  z-index: 2;
}
.core-port--top { left: 50%; top: -20px; transform: translateX(-50%); }
.core-port--right { right: -20px; top: 50%; transform: translateY(-50%); }
.core-port--bottom { left: 50%; bottom: -20px; transform: translateX(-50%); }
.core-port--left { left: -20px; top: 50%; transform: translateY(-50%); }
.core-mark {
  display: grid;
  place-items: center;
  position: relative;
  margin: auto;
  width: 95px;
  height: 93px;
  color: var(--cyan);
  filter: drop-shadow(0 0 15px #23d5ff77);
}
.core-mark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}
.topology-core b {
  position: relative;
  margin-top: 9px;
  font-family: Oxanium, sans-serif;
  font-size: 21px;
}
.topology-core small {
  position: relative;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-top: 8px;
}
.core-status {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.core-status i {
  width: 5px;
  height: 5px;
  background: var(--cyan);
  border-radius: 50%;
}
.core-status i:last-child {
  background: var(--lime);
}
.command-stage {
  padding-top: 44px;
}
.stage-intro {
  max-width: none;
  margin: 0 0 25px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 44px;
}
.stage-intro p {
  margin: 0;
  max-width: 42ch;
  line-height: 1.6;
}
.command-frame {
  display: grid;
  grid-template-columns: 214px 1fr 275px;
  border: 1px solid color-mix(in srgb, var(--white) 36%, transparent);
  min-height: 650px;
  clip-path: polygon(
    0 2%,
    1.5% 0,
    98.5% 0,
    100% 2%,
    100% 98%,
    98.5% 100%,
    1.5% 100%,
    0 98%
  );
  background: linear-gradient(90deg, #071522, #06111d 52%, #071522);
}
#capability-list {
  border-right: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
}
.capability-row {
  position: relative;
  width: 100%;
  min-height: 81px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  color: var(--slate);
  text-align: left;
}
.capability-row span {
  font-family: Oxanium, sans-serif;
  font-size: 11px;
  color: var(--cyan);
}
.capability-row svg,
.workspace-copy > svg,
#system-summary svg,
.drawer-priorities svg {
  width: 27px;
  height: 27px;
  color: var(--cyan);
  flex: none;
}
.capability-row b {
  font-size: 12px;
}
.capability-row.is-active {
  color: var(--white);
  background: linear-gradient(90deg, #082b40, #071522);
  outline: 1px solid var(--cyan);
}
.capability-row.is-active:after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50%;
  width: 24px;
  height: 24px;
  background: #071522;
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}
#capability-workspace {
  padding: clamp(32px, 3.5vw, 55px);
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 30px;
  background: radial-gradient(circle at 70% 50%, #0a293c 0, transparent 50%);
}
.workspace-copy h3 {
  font-size: 30px;
  margin-top: 8px;
}
.workspace-copy p {
  font-size: 15px;
  line-height: 1.65;
}
.workspace-copy ul {
  padding: 0;
  margin: 23px 0;
}
.workspace-copy li {
  list-style: none;
  color: var(--white);
  padding: 10px 0 10px 47px;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  position: relative;
  font-size: 14px;
}
.workspace-copy li:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 17px;
  height: 17px;
  border: 1px solid var(--lime);
  transform: translateY(-50%) rotate(45deg);
}
.outline-action,
.continue,
.copy-button {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--cyan);
  display: flex;
  justify-content: space-between;
  color: var(--cyan);
  font-family: Oxanium, sans-serif;
  clip-path: polygon(0 0, 94% 0, 100% 15%, 100% 100%, 0 100%);
}
.system-blueprint {
  position: relative;
  min-height: 400px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  background-image:
    linear-gradient(#0aa8d014 1px, transparent 1px),
    linear-gradient(90deg, #0aa8d014 1px, transparent 1px);
  background-size: 16px 16px;
  overflow: hidden;
}
.system-blueprint:before,
.system-blueprint:after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, transparent);
  clip-path: polygon(
    10% 0,
    90% 0,
    100% 16%,
    100% 84%,
    90% 100%,
    10% 100%,
    0 84%,
    0 16%
  );
}
.system-blueprint:after {
  inset: 53px 18%;
  border-color: var(--cyan);
}
.system-blueprint .blueprint-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px 8px;
  border: 1px solid var(--cyan);
  background: #071b2a;
  clip-path: polygon(
    12% 0,
    88% 0,
    100% 14%,
    100% 86%,
    88% 100%,
    12% 100%,
    0 86%,
    0 14%
  );
}
.blueprint-core svg {
  width: 44px;
  height: 44px;
  color: var(--cyan);
}
.blueprint-core b {
  font-family: Oxanium, sans-serif;
  font-size: 13px;
}
.blueprint-flow {
  position: absolute;
  inset: 0;
}
.blueprint-flow span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--cyan) 60%, transparent);
  padding: 8px 7px;
  font-family: Oxanium, sans-serif;
  font-size: 10px;
  color: var(--white);
  background: #071827;
}
.blueprint-flow span:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: 60px;
  background: var(--cyan);
  opacity: 0.7;
}
.blueprint-flow span:nth-child(1),
.blueprint-flow span:nth-child(3),
.blueprint-flow span:nth-child(5) {
  left: 8%;
}
.blueprint-flow span:nth-child(2),
.blueprint-flow span:nth-child(4),
.blueprint-flow span:nth-child(6) {
  right: 8%;
}
.blueprint-flow span:nth-child(1),
.blueprint-flow span:nth-child(2) {
  top: 15%;
}
.blueprint-flow span:nth-child(3),
.blueprint-flow span:nth-child(4) {
  top: 45%;
}
.blueprint-flow span:nth-child(5),
.blueprint-flow span:nth-child(6) {
  bottom: 15%;
}
.blueprint-flow span:nth-child(1):after,
.blueprint-flow span:nth-child(3):after,
.blueprint-flow span:nth-child(5):after {
  left: 100%;
}
.blueprint-flow span:nth-child(2):after,
.blueprint-flow span:nth-child(4):after,
.blueprint-flow span:nth-child(6):after {
  right: 100%;
}
.system-blueprint > span {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  color: var(--slate);
  font-family: Oxanium, sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.blueprint-lines {
  display: none;
}
#system-summary {
  padding: 25px 18px;
  background: linear-gradient(180deg, #081a28, #06121e);
  border-left: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
  display: flex;
  flex-direction: column;
}
#system-summary p {
  font-family: Oxanium, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}
#system-summary > div {
  display: grid;
  gap: 10px;
}
#system-summary > div button {
  border: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
  padding: 13px 10px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  clip-path: polygon(0 0, 96% 0, 100% 14%, 100% 100%, 0 100%);
}
#system-summary > div:after {
  content: "+\A\A+\A\A+";
  white-space: pre;
  display: grid;
  place-items: center;
  min-height: 152px;
  color: color-mix(in srgb, var(--white) 30%, transparent);
  font-size: 20px;
  letter-spacing: 2.1em;
  border: 1px dashed color-mix(in srgb, var(--white) 18%, transparent);
}
#system-summary i,
.drawer-priorities i {
  color: var(--lime);
  font-style: normal;
  margin-left: auto;
}
.continue {
  margin-top: auto;
}
.method-stage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  align-items: start;
  min-height: 650px;
  padding-top: 88px;
}
.method-main > h2 {
  max-width: 11ch;
}
.method-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 61px 0 0;
  margin: 0;
  position: relative;
}
.method-line:before {
  content: "";
  height: 2px;
  background: var(--cyan);
  position: absolute;
  top: 88px;
  left: 7%;
  right: 7%;
  transform-origin: left;
  transform: scaleX(var(--line-progress, 1));
}
.method-line li {
  list-style: none;
  position: relative;
  text-align: center;
}
.method-line li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 61px;
  height: 61px;
  background: #071827;
  border: 1px solid var(--cyan);
  clip-path: polygon(
    16% 0,
    84% 0,
    100% 16%,
    100% 84%,
    84% 100%,
    16% 100%,
    0 84%,
    0 16%
  );
}
.method-line li:after {
  content: "→";
  position: absolute;
  right: -9px;
  top: 30px;
  color: var(--cyan);
  font-size: 24px;
  z-index: 1;
}
.method-line li:last-child:after {
  display: none;
}
.method-line b {
  position: relative;
  z-index: 1;
  display: block;
  padding-top: 29px;
  color: var(--cyan);
  font-family: Oxanium, sans-serif;
  font-size: 16px;
}
.method-line span {
  display: block;
  color: var(--slate);
  font-size: 12px;
  padding-top: 31px;
  line-height: 1.55;
}
.method-close {
  position: relative;
  margin-top: 62px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  padding: 31px 100px 31px 38px;
  font-family: Oxanium, sans-serif;
  font-size: clamp(25px, 2.75vw, 40px);
  clip-path: polygon(
    0 0,
    84% 0,
    91% 11%,
    100% 11%,
    100% 89%,
    91% 89%,
    84% 100%,
    0 100%,
    0 75%,
    4% 70%,
    4% 30%,
    0 25%
  );
}
.method-close:after {
  content: "→";
  position: absolute;
  right: 36px;
  top: 50%;
  color: var(--cyan);
  transform: translateY(-50%);
  font-size: 44px;
}
.method-close strong {
  color: var(--cyan);
}
.brief-drawer {
  position: sticky;
  top: 22px;
  min-height: 590px;
  border-left: 1px solid var(--slate);
  background: linear-gradient(135deg, #081827, #050b14);
  padding: 52px 30px 30px;
  box-shadow: -25px 10px 55px #0008;
}
.brief-drawer:before {
  content: "";
  position: absolute;
  left: -9px;
  top: 54px;
  width: 17px;
  height: 17px;
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  transform: rotate(45deg);
  background: #071523;
}
.brief-drawer[hidden] {
  display: none;
}
.brief-drawer h2 {
  font-size: 34px;
}
.drawer-close {
  position: absolute;
  right: 18px;
  top: 12px;
  font-family: Oxanium, sans-serif;
  font-size: 30px;
  border: 0;
}
.drawer-priorities {
  margin: 24px 0;
}
.drawer-priorities h3 {
  font-family: Oxanium, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--slate);
  margin-bottom: 10px;
}
.drawer-priorities > div {
  display: grid;
  gap: 8px;
}
.drawer-priorities button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--lime);
  padding: 11px 10px;
  text-align: left;
  font-size: 12px;
  clip-path: polygon(0 0, 96% 0, 100% 14%, 100% 100%, 0 100%);
}
.drawer-priorities svg {
  width: 21px;
  height: 21px;
}
.project-stages {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.project-stages button {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  text-align: left;
  display: flex;
  justify-content: space-between;
  clip-path: polygon(0 0, 96% 0, 100% 14%, 100% 100%, 0 100%);
}
.project-stages button[aria-pressed="true"] {
  border-color: var(--lime);
  color: var(--white);
}
.project-stages i {
  width: 16px;
  height: 16px;
  border: 1px solid var(--slate);
  border-radius: 50%;
}
.project-stages button[aria-pressed="true"] i {
  border: 5px solid var(--lime);
}
.full {
  margin-top: 19px;
  width: 100%;
  justify-content: space-between;
}
.brief-drawer textarea {
  margin-top: 14px;
  width: 100%;
  min-height: 95px;
  background: #030810;
  color: var(--white);
  border: 1px solid var(--slate);
  padding: 12px;
  resize: vertical;
}
.feedback {
  font-size: 12px;
  margin: 12px 0;
}
.copy-button {
  margin-top: 10px;
}
footer {
  border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-bottom: 0;
}
footer svg {
  width: 215px;
  height: auto;
}
footer button {
  border: 0;
  color: var(--cyan);
}
.motion-ready .stage {
  --stage-progress: 0;
  --depth: 0;
}
.motion-ready .command-frame {
  transform: translateY(calc((1 - var(--depth)) * 34px))
    scale(calc(0.92 + var(--depth) * 0.08));
  filter: blur(calc((1 - var(--depth)) * 9px));
  transition:
    transform 0.22s ease-out,
    filter 0.22s ease-out;
}
.motion-ready .topology {
  transform: translate3d(0, calc((1 - var(--stage-progress)) * 35px), 0)
    scale(calc(0.94 + var(--stage-progress) * 0.06));
  filter: blur(calc((1 - var(--stage-progress)) * 5px));
  transition:
    transform 0.25s ease-out,
    filter 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  .motion-ready .command-frame,
  .motion-ready .topology {
    transform: none;
    filter: none;
  }
}
@media (max-width: 720px) {
  .site-header {
    padding: 12px 20px;
  }
  .brand svg {
    width: 221px;
  }
  .site-header nav > a {
    display: none;
  }
  .site-header nav button {
    min-width: auto;
    padding: 11px 12px;
    font-size: 0;
    gap: 0;
  }
  .site-header nav button:after {
    content: "☰";
    font-size: 23px;
    line-height: 1;
  }
  .site-header nav button svg {
    display: none;
  }
  .hero {
    display: block;
    min-height: 0;
    padding-top: 38px;
    padding-bottom: 8px;
  }
  .hero h1 {
    font-size: clamp(35px, 9.6vw, 41px);
    max-width: 11.2ch;
    line-height: 1.04;
    letter-spacing: -0.045em;
  }
  .hero-copy p {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 19px;
  }
  .hero-actions {
    display: block;
    margin-top: 19px;
  }
  .hero-actions a {
    width: 100%;
    margin-bottom: 10px;
  }
  .topology {
    height: 318px;
    margin-top: 0;
    margin-bottom: -2px;
    transform: scale(0.88);
    transform-origin: top center;
  }
  .topology-module {
    width: 82px;
    height: 68px;
    padding: 6px 3px;
    gap: 3px;
  }
  .topology-module svg {
    width: 23px;
    height: 23px;
  }
  .topology-module b {
    font-size: 8px;
  }
  .topology-module i {
    right: 5px;
    top: 5px;
    width: 15px;
    height: 15px;
    font-size: 9px;
  }
  .module--nw {
    left: 5%;
    top: 4%;
  }
  .module--ne {
    right: 5%;
    top: 4%;
  }
  .module--west {
    left: 1%;
    top: 35%;
  }
  .module--east {
    right: 1%;
    top: 35%;
  }
  .module--sw {
    left: 5%;
    bottom: 20%;
  }
  .module--se {
    right: 5%;
    bottom: 20%;
  }
  .module--southwest {
    display: none;
  }
  .module--southeast {
    display: none;
  }
  .topology-core {
    width: 176px;
    top: 39%;
  }
  .core-mark {
    width: 51px;
    height: 49px;
  }
  .topology-core b {
    font-size: 13px;
    margin-top: 5px;
  }
  .topology-core small {
    font-size: 7px;
    margin-top: 3px;
  }
  .core-status {
    bottom: 9px;
    gap: 4px;
  }
  .core-status i {
    width: 3px;
    height: 3px;
  }
  .command-stage {
    padding-top: 35px;
  }
  .stage-intro {
    display: block;
    margin-bottom: 20px;
  }
  .stage-intro h2 {
    font-size: 37px;
  }
  .stage-intro p {
    font-size: 15px;
    margin-top: 12px;
  }
  .command-frame {
    display: block;
    overflow: hidden;
  }
  .capability-row {
    min-width: 70px;
    min-height: 66px;
    display: grid;
    place-items: center;
    padding: 6px;
    text-align: center;
    font-size: 0;
  }
  .capability-row span {
    font-size: 8px;
  }
  .capability-row b {
    display: none;
  }
  .capability-row svg {
    width: 21px;
  }
  .capability-row.is-active:after {
    right: auto;
    top: auto;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  #capability-list {
    display: flex;
    overflow: auto;
    border-bottom: 1px solid var(--rail);
  }
  #capability-workspace {
    display: block;
    padding: 28px 22px;
  }
  .workspace-copy h3 {
    font-size: 28px;
  }
  .workspace-copy p {
    font-size: 15px;
  }
  .workspace-copy li {
    font-size: 13px;
  }
  .system-blueprint {
    min-height: 272px;
    margin-top: 22px;
  }
  .blueprint-flow span {
    font-size: 7px;
    padding: 5px;
  }
  .blueprint-flow span:after {
    width: 25px;
  }
  .system-blueprint .blueprint-core {
    width: 105px;
    font-size: 10px;
  }
  .blueprint-core svg {
    width: 31px;
    height: 31px;
  }
  #system-summary {
    position: sticky;
    bottom: 0;
    z-index: 3;
    border-left: 0;
    border-top: 1px solid var(--rail);
    padding: 14px;
    box-shadow: 0 -10px 30px #000b;
  }
  #system-summary > div {
    display: flex;
    overflow: auto;
  }
  #system-summary > div button {
    min-width: max-content;
  }
  #system-summary > div:after {
    display: none;
  }
  .continue {
    margin-top: 13px;
  }
  .method-stage {
    display: block;
    padding-top: 60px;
  }
  .method-line {
    grid-template-columns: 1fr;
    padding: 28px 0 12px;
    gap: 22px;
  }
  .method-line:before {
    width: 2px;
    height: calc(100% - 74px);
    left: 30px;
    top: 56px;
    right: auto;
    transform: scaleY(var(--line-progress, 1));
    transform-origin: top;
  }
  .method-line li {
    text-align: left;
    padding: 0 0 0 83px;
    min-height: 72px;
  }
  .method-line li:before {
    top: 0;
    left: 0;
    transform: none;
  }
  .method-line li:after {
    content: "↓";
    left: 23px;
    right: auto;
    top: 61px;
    font-size: 20px;
  }
  .method-line b {
    padding-top: 11px;
    font-size: 16px;
  }
  .method-line span {
    padding-top: 6px;
    font-size: 12px;
  }
  .method-close {
    margin-top: 30px;
    padding: 26px 67px 26px 25px;
    font-size: 26px;
  }
  .method-close:after {
    right: 22px;
    font-size: 31px;
  }
  .brief-drawer {
    position: fixed;
    z-index: 8;
    inset: auto 0 0 0;
    min-height: 0;
    max-height: 88vh;
    overflow: auto;
    border: 1px solid var(--slate);
    border-bottom: 0;
    padding: 47px 25px 25px;
    clip-path: polygon(5% 0, 95% 0, 100% 4%, 100% 100%, 0 100%, 0 4%);
  }
  .brief-drawer:before {
    display: none;
  }
  .brief-drawer h2 {
    font-size: 29px;
  }
  footer {
    display: block;
    padding: 24px 20px;
  }
  footer nav {
    margin-top: 22px;
    justify-content: space-between;
    font-size: 13px;
    gap: 0;
  }
}

/* Consolidated fidelity correction: chassis depth, operational capability map and method drawer composition. */
.topology-core { filter: drop-shadow(0 14px 20px #000a) drop-shadow(0 0 22px #23d5ff88); }
.core-shell--outer { transform: scale(1.19); opacity: .9; border-width: 2px; box-shadow: 0 0 20px #23d5ff66; }
.core-shell--outer-2 { transform: scale(1.13); opacity: .95; border-width: 3px; }
.core-shell--mid { transform: scale(1.07); border-width: 2px; }
.core-shell--inner { box-shadow: inset 0 -28px 0 #04111e, inset 0 0 0 8px #08263a, 0 18px 0 -10px #0d3c54; }
.topology-core:before,.topology-core:after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:310px; height:58px; border:2px solid var(--cyan); background:#071827; clip-path:polygon(7% 0,93% 0,100% 35%,100% 100%,0 100%,0 35%); z-index:-1; }
.topology-core:before { bottom:-26px; box-shadow:0 0 24px #23d5ff77; }.topology-core:after { bottom:-45px; width:276px; opacity:.9; }
.core-circuit { border-width:2px; box-shadow:inset 0 0 20px #23d5ff55; }.core-port { width:20px;height:20px;box-shadow:0 0 13px #23d5ff; }
.infrastructure-racks { left:1%; gap:2px; perspective:500px; }.infrastructure-racks i { width:64px; height:150px; border-color:#2283aa; transform:skewY(7deg) rotateY(18deg); background:repeating-linear-gradient(to bottom,#071523 0 9px,#22b9e233 10px 12px); }.infrastructure-racks i:nth-child(2){height:126px}.infrastructure-racks i:nth-child(3){height:105px}.infrastructure-racks i:nth-child(4){height:82px}
.infrastructure-africa { left:39%; width:270px; height:170px; top:17px; filter:drop-shadow(0 0 9px #23d5ff99); }.infrastructure-africa path { fill:#0a304780; stroke:#23d5ff; stroke-width:1.3; stroke-dasharray:1 4; }.infrastructure-africa g path { stroke:#23d5ff; stroke-dasharray:3 4; }.infrastructure-africa circle { r:3; }
.infrastructure-console { right:3.5%; width:33%; height:168px; top:25px; box-shadow:inset 0 0 35px #0a4e7066; }.infrastructure-console span { height:14px; margin-top:8px; border-top-width:2px; box-shadow:0 5px 0 #23d5ff33; }
.lifecycle-rail { height:54px; margin:-44px -54px 25px; padding:17px 18%; display:flex; justify-content:space-between; border-bottom:1px solid #23546b; color:var(--slate); font:11px Oxanium,sans-serif; letter-spacing:.08em; text-transform:uppercase; }.lifecycle-rail b { color:var(--cyan); border-bottom:2px solid var(--cyan); padding:0 34px 16px; margin-top:-17px; padding-top:17px; }
.system-blueprint--operational { min-height:480px; border:0; background:radial-gradient(circle at 50% 46%,#0a2e43 0,transparent 44%),linear-gradient(#0aa8d014 1px,transparent 1px),linear-gradient(90deg,#0aa8d014 1px,transparent 1px); }
.system-blueprint--operational:before { inset:70px 24px 30px; border-width:2px; }.system-blueprint--operational:after { inset:182px 23% 100px; border-width:2px; }
.operating-inputs,.operating-domains { position:absolute; left:8%; right:8%; display:flex; justify-content:space-between; z-index:2; }.operating-inputs { top:30px; }.operating-domains { bottom:60px; }.operating-inputs span,.operating-domains span { max-width:83px; min-height:57px; display:grid; place-items:center; padding:7px; border:1px solid #23d5ffaa; background:#071827; color:var(--white); text-align:center; font:9px Oxanium,sans-serif; }.operating-domains span { min-height:73px; clip-path:polygon(8% 0,92% 0,100% 12%,100% 88%,92% 100%,8% 100%,0 88%,0 12%); }.system-blueprint--operational .blueprint-core { width:170px; height:138px; }.system-blueprint--operational .blueprint-lines { display:block; position:absolute; inset:88px 12% 115px; background:repeating-radial-gradient(ellipse at 50% 45%,transparent 0 20px,#23d5ff88 21px 22px,transparent 23px 44px); clip-path:polygon(50% 28%,100% 0,84% 68%,100% 100%,50% 74%,0 100%,16% 68%,0 0); }.system-blueprint--operational em { position:absolute; bottom:25px; width:100%; text-align:center; color:var(--slate); font:9px Oxanium,sans-serif; letter-spacing:.13em; font-style:normal; }
@media (min-width:721px){.command-frame{grid-template-columns:214px 1fr 275px}.method-stage{min-height:900px;padding-top:64px}.method-main>h2{font-size:58px}.method-line{padding-top:55px}.method-line li:before{width:78px;height:78px;top:0}.method-line b{padding-top:30px}.method-line span{padding-top:38px}.brief-drawer{position:fixed;z-index:8;top:0;right:0;bottom:0;width:468px;min-height:100vh;padding-top:86px}.method-main{padding-right:40px}.method-close{margin-top:72px}.drawer-priorities{margin:26px 0}.drawer-close{top:20px}.site-header .brand svg{width:300px}.brand-logo text{letter-spacing:-.35px}.hero h1{font-weight:700;letter-spacing:-.035em}}
@media(max-width:720px){.brand svg{display:none}.brand:after{content:'MAURITECH\A DIGITAL';white-space:pre;display:block;font:700 20px/1.02 Oxanium,sans-serif;letter-spacing:.1em;color:var(--white)}.brand:after::first-line{color:var(--white)}.hero{overflow:hidden}.hero-copy p{max-width:calc(100vw - 60px);overflow-wrap:anywhere}.topology{height:344px}.topology-rails{display:none}.topology-core{top:45%;left:50%;width:150px}.topology-module{display:none}.module--ne,.module--sw,.module--southwest{display:flex;width:142px;height:74px;padding:9px;flex-direction:row;justify-content:flex-start;gap:9px;font-size:14px}.topology-module b{font-size:14px;text-align:left}.topology-module svg{width:29px;height:29px}.module--ne{left:0;top:6%}.module--sw{right:0;left:auto;bottom:25%}.module--southwest{left:0;bottom:0}.topology:before{inset:2% 0}.lifecycle-rail{display:none}}

/* Approved command-center hero fidelity: broad type field, portrait core and visible infrastructure horizon. */
@media (min-width: 721px) {
  .site-header { height: 94px; padding: 16px 25px 16px 31px; }
  .brand svg { width: 264px; }
  .site-header nav { gap: 40px; }
  .site-header nav > a { font-size: 16px; gap: 12px; }
  .site-header nav button { width: 267px; min-height: 50px; padding: 15px 24px; }
  .hero { min-height: 740px; grid-template-columns: 575px minmax(0, 824px); gap: 48px; padding: 40px 51px 0; align-items: start; }
  .hero-copy { padding-top: 70px; }
  h1 { font-size: 66px; max-width: none; line-height: 1.16; letter-spacing: -0.04em; }
  h1 span { display: block; white-space: nowrap; }
  .hero-copy p { max-width: 530px; margin-top: 25px; }
  .hero-actions { gap: 30px; margin-top: 37px; }
  .primary-action { min-width: 290px; }
  .topology { height: 662px; margin-top: 0; }
  .topology-module { width: 157px; height: 125px; }
  .topology-core { width: 280px; aspect-ratio: .75; }
  .core-shell { clip-path: polygon(15% 0,85% 0,100% 8%,100% 92%,85% 100%,15% 100%,0 92%,0 8%); }
  .core-shell--inner { inset: 20px; }
  .core-circuit { inset: 30px 28px; }
  .core-mark { width: 100px; height: 94px; }
  .topology-core b { font-size: 19px; }
  .module--nw { left: 3%; top: 0; } .module--ne { right: 3%; top: 0; }
  .module--west { left: 0; top: 31%; } .module--east { right: 0; top: 31%; }
  .module--sw { left: 3%; bottom: 13%; } .module--se { right: 3%; bottom: 13%; }
  .module--southwest { left: 18%; bottom: 0; } .module--southeast { right: 18%; bottom: 0; }
}
.infrastructure-continuation { height: 230px; max-width: 1536px; margin: -6px auto 0; position: relative; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--white) 24%, transparent); background: radial-gradient(ellipse at 50% 100%, #09243b 0, transparent 56%); }
.infrastructure-racks { position: absolute; left: 2%; bottom: -16px; display: flex; gap: 11px; align-items: end; opacity: .75; }
.infrastructure-racks i { width: 64px; height: 126px; border: 1px solid #1679a0; background: repeating-linear-gradient(to bottom, transparent 0 12px, #176485 13px 14px); transform: skewY(7deg); }
.infrastructure-racks i:nth-child(2) { height: 95px; }.infrastructure-racks i:nth-child(3) { height: 112px; }.infrastructure-racks i:nth-child(4) { height: 78px; }
.infrastructure-africa { position: absolute; left: 42%; top: 29px; width: 230px; height: 135px; color: var(--cyan); opacity: .72; }
.infrastructure-africa path { stroke-dasharray: 2 4; }.infrastructure-africa circle { fill: var(--cyan); stroke: none; }
.infrastructure-console { position: absolute; right: 3.5%; top: 38px; width: 32%; height: 148px; border: 1px solid #176485; padding: 18px 26px; color: var(--cyan); font: 11px Oxanium, sans-serif; letter-spacing: .12em; background: linear-gradient(135deg, #071827dd, #06111dcc); }
.infrastructure-console span { display: block; height: 10px; margin-top: 13px; border-top: 1px solid #23d5ff99; width: 73%; }.infrastructure-console span:nth-child(3n) { width: 48%; }.infrastructure-console span:nth-child(2n) { margin-left: 14%; }
@media (max-width: 720px) {
  .site-header { min-height: 88px; } .brand svg { width: 188px; }
  .hero h1 span { display: inline; } .hero h1 span + span::before { content: ' '; }
  .topology { height: 300px; transform: none; margin-top: 20px; }
  .topology-module { width: 76px; height: 67px; }.module--southwest,.module--southeast { display: flex; bottom: 0; }.module--southwest { left: 24%; }.module--southeast { right: 24%; }
  .topology-core { width: 132px; aspect-ratio: .75; top: 44%; }.core-mark { width: 46px; height: 43px; }.topology-core b { font-size: 11px; }.topology-core small { font-size: 6px; }
  .infrastructure-continuation { display: none; }
}

/* Dedicated mobile hero: vertical command chain, not a squeezed desktop topology. */
.mobile-menu-toggle, .mobile-heading, .mobile-topology, .mobile-brand { display: none; }
@media (max-width: 720px) {
  .site-header { min-height: 76px; padding: 17px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
  .brand:after { display: none; }
  .brand { position: relative; min-width: 0; max-width: calc(100vw - 74px); overflow: hidden; }
  .brand:before { content: ''; display: inline-block; width: 23px; height: 28px; margin-right: 10px; vertical-align: middle; background: linear-gradient(135deg, transparent 0 29%, var(--cyan) 30% 39%, transparent 40% 58%, var(--cyan) 59% 67%, transparent 68%), linear-gradient(90deg, var(--cyan) 0 3px, transparent 3px 20px, var(--cyan) 20px 23px); clip-path: polygon(0 100%,0 0,50% 38%,100% 0,100% 100%,82% 100%,82% 31%,50% 62%,18% 31%,18% 100%); }
  .mobile-brand { display: inline-flex; flex-direction: column; vertical-align: middle; font-family: Oxanium, sans-serif; letter-spacing: .14em; line-height: 1.05; }
  .mobile-brand b { color: var(--white); font-size: 14px; }.mobile-brand i { color: var(--cyan); font-size: 11px; font-style: normal; }
  .mobile-menu-toggle { justify-self: end; display: grid; width: 44px; height: 44px; place-content: center; gap: 5px; padding: 0; border: 1px solid #23d5ff99; z-index: 9; }
  .mobile-menu-toggle span { display: block; width: 18px; height: 1px; background: var(--cyan); }
  .site-header nav { display: none; position: absolute; top: 75px; right: 22px; left: 22px; z-index: 8; padding: 18px; border: 1px solid #23d5ff88; background: #071523f8; box-shadow: 0 18px 38px #000c; }
  .site-header nav[aria-hidden='false'] { display: grid; gap: 12px; }
  .site-header nav > a { display: flex; font-size: 15px; padding: 8px 0; }
  .site-header nav .brief-trigger { display: flex; width: 100%; justify-content: space-between; min-height: 46px; font-size: 14px; }
  .hero h1 .desktop-heading, .desktop-topology { display: none !important; }
  .hero h1 .mobile-heading { display: block; }
  .hero h1 .mobile-heading > span { display: block; white-space: nowrap; }
  .hero { padding: 26px 22px 0; overflow: visible; }
  .hero-copy { min-width: 0; overflow: visible; }
  .hero h1 { max-width: none; font-size: clamp(39px, 10.7vw, 43px); line-height: 1.04; letter-spacing: -.055em; }
  .mobile-heading > span:nth-child(4) { color: var(--cyan); }
  .hero-copy p { width: min(100%, calc(100vw - 44px)); max-width: calc(100vw - 44px); min-width: 0; margin-top: 20px; margin-right: 0; padding-right: 0; padding-left: 0; font-size: 15px; line-height: 1.52; overflow-wrap: break-word; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .primary-action { width: auto; min-width: 244px; min-height: 54px; margin: 0; padding: 15px 18px; }
  .hero-actions .secondary-action { display: none; }
  .topology { display: block; height: 638px; margin: 30px -22px 0; transform: none !important; filter: none !important; overflow: visible; }
  .mobile-topology { display: block; position: relative; min-height: 638px; padding: 0 22px; }
  .mobile-topology:before { content: ''; position: absolute; top: 74px; bottom: 0; left: 50%; width: 1px; background: linear-gradient(var(--cyan), #23d5ff33 76%, transparent); box-shadow: 0 0 12px #23d5ff99; }
  .mobile-core { position: relative; z-index: 1; display: grid; width: 178px; height: 184px; margin: 0 auto; place-content: center; text-align: center; background: linear-gradient(145deg, #0b2232, #06101c); border: 2px solid var(--cyan); clip-path: polygon(14% 0,86% 0,100% 12%,100% 88%,86% 100%,14% 100%,0 88%,0 12%); box-shadow: 0 0 0 8px #23d5ff15, 0 0 28px #23d5ff77, inset 0 -30px #05101d; }
  .mobile-core-shell { position: absolute; inset: 10px; border: 1px solid #23d5ff88; clip-path: inherit; }
  .mobile-core .core-mark { position: relative; width: 65px; height: 61px; margin: 0 auto 10px; }
  .mobile-core b { display: block; position: relative; font: 700 14px/1.1 Manrope, sans-serif; }
  .mobile-core small { display: block; position: relative; margin-top: 8px; color: var(--cyan); font: 700 8px/1 Oxanium, sans-serif; letter-spacing: .14em; }
  .mobile-chain { position: relative; z-index: 1; display: grid; gap: 20px; width: min(calc(100vw - 44px), 282px); margin: 32px auto 0; }
  .mobile-module { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; width: 100%; min-height: 80px; padding: 15px 18px; gap: 12px; text-align: left; border: 1px solid #8ea1b899; background: #071523; clip-path: polygon(8% 0,92% 0,100% 13%,100% 87%,92% 100%,8% 100%,0 87%,0 13%); box-shadow: 0 8px 18px #0008; }
  .mobile-module svg { width: 30px; height: 30px; color: var(--cyan); }
  .mobile-module b { font: 700 13px/1.2 Oxanium, sans-serif; }
  .mobile-module i { position: absolute; bottom: -26px; left: 50%; color: var(--cyan); font-style: normal; transform: translateX(-50%); }
  .mobile-module:last-child i { display: none; }
}