.ambient {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 72% 24%,
      rgba(38, 80, 56, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 18% 70%,
      rgba(25, 56, 43, 0.10),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #080a0b 0%,
      #050607 100%
    );
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode: soft-light;
}

.ambient__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    );

  background-size:
    78px 78px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 78%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 78%,
      transparent 100%
    );
}

.ambient__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.10;
}

.ambient__glow--one {
  width: 560px;
  height: 560px;
  right: 10%;
  top: 12%;
  background: rgba(65, 155, 99, 0.24);
}

.ambient__glow--two {
  width: 420px;
  height: 420px;
  left: 3%;
  bottom: 8%;
  background: rgba(44, 90, 70, 0.16);
}

.ambient__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.24;
  overflow: visible;
}

.route {
  fill: none;
  stroke: rgba(103, 245, 154, 0.09);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;

  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    backdrop-filter 280ms ease;
}

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

.header__inner {
  height: 100%;

  display: grid;
  grid-template-columns:
    minmax(230px, 1fr)
    auto
    minmax(230px, 1fr);

  align-items: center;
  gap: 28px;
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.section--hero {
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    calc(var(--header-h) + 74px)
    0
    48px;
}

.hero__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(460px, 0.82fr);

  align-items: center;

  gap:
    clamp(
      64px,
      7vw,
      130px
    );
}

.hero__content {
  max-width: 790px;
}

.hero__visual-stage {
  position: relative;

  width:
    min(
      100%,
      640px
    );

  aspect-ratio: 1;

  justify-self: center;

  display: grid;
  place-items: center;

  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero__lower {
  margin-top:
    clamp(
      54px,
      7vh,
      96px
    );

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

.platform-section {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      transparent
    );
}

.genome {
  margin-top: 70px;

  display: grid;
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(180px, 0.7fr)
    minmax(240px, 1fr);

  gap: 42px;
  align-items: center;
}

.genome__inputs,
.genome__outputs {
  display: grid;
  gap: 10px;
}

.genome__core {
  width: 180px;
  aspect-ratio: 1;
  justify-self: center;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid var(--accent-line);

  background:
    radial-gradient(
      circle at center,
      rgba(103, 245, 154, 0.07),
      transparent 58%
    ),
    var(--bg-soft);

  box-shadow:
    inset 0 0 0 14px rgba(255, 255, 255, 0.01),
    0 20px 80px rgba(0, 0, 0, 0.38);
}

.genome__core span,
.genome__core strong {
  position: absolute;
}

.genome__core span {
  margin-top: -24px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.genome__core strong {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 24px;
}

.genome-detail {
  margin-top: 42px;
  max-width: 760px;

  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.capability-environment {
  margin-top: 70px;

  display: grid;
  grid-template-columns:
    minmax(300px, 0.74fr)
    minmax(0, 1.26fr);

  gap: 56px;
  align-items: stretch;
}

.capability-list {
  display: grid;
  align-content: start;
}

.capability-stage {
  min-height: 620px;
  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(103, 245, 154, 0.07),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.015);
}

.xray-stack {
  margin-top: 64px;

  display: grid;
  gap: 10px;
}

.xray-stack > div {
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.chaos-control {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    1fr
    220px
    1fr;

  gap: 40px;
  align-items: center;
}

.chaos-control__before,
.chaos-control__after {
  display: grid;
  gap: 10px;
}

.chaos-control__core {
  min-height: 220px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid var(--accent-line);

  background:
    radial-gradient(
      circle at center,
      rgba(103, 245, 154, 0.08),
      transparent 62%
    );

  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.event-engine {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    minmax(260px, 0.8fr)
    minmax(0, 1.4fr)
    minmax(220px, 0.7fr);

  gap: 34px;
  align-items: stretch;
}

.event-engine__steps {
  display: grid;
  gap: 10px;
}

.exception-engine {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 1px;

  background: var(--line);
  border: 1px solid var(--line);
}

.exception-engine > div {
  min-height: 180px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 24px;

  background: var(--bg-soft);
}

.command-demo {
  margin-top: 64px;

  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.014);
}

.command-demo__header {
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  border-bottom: 1px solid var(--line);
}

.command-demo__stats {
  display: grid;
  grid-template-columns:
    repeat(5, 1fr);

  border-bottom: 1px solid var(--line);
}

.command-demo__workspace {
  min-height: 460px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(240px, 0.75fr);

  grid-template-rows:
    1fr
    1fr;
}

.command-demo__map {
  grid-row: 1 / 3;
  border-right: 1px solid var(--line);
}

.command-demo__feed {
  border-bottom: 1px solid var(--line);
}

.command-demo__map,
.command-demo__feed,
.command-demo__exceptions {
  display: grid;
  place-items: center;
}

.industries-grid {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1px;

  background: var(--line);
  border: 1px solid var(--line);
}

.industries-beyond {
  margin-top: 34px;

  display: grid;
  grid-template-columns:
    220px
    minmax(0, 1fr);

  gap: 40px;
  align-items: start;

  padding-top: 28px;

  border-top: 1px solid var(--line);
}

.global-environment {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(300px, 0.6fr);

  gap: 50px;
  align-items: stretch;
}

.world-map {
  min-height: 520px;
  position: relative;
  overflow: hidden;

  border: 1px solid var(--line);

  background:
    radial-gradient(
      circle at 52% 46%,
      rgba(103, 245, 154, 0.06),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.008)
    );
}

.global-session {
  border-top: 1px solid var(--line);

  padding-top: 24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.global-session__meta {
  margin-top: 40px;

  display: grid;
  gap: 18px;
}

.builder-layout {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    minmax(280px, 0.7fr)
    minmax(0, 1.3fr);

  gap: 50px;
  align-items: stretch;
}

.builder-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

.builder-blueprint {
  min-height: 520px;
  position: relative;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);

  background:
    radial-gradient(
      circle at center,
      rgba(103, 245, 154, 0.06),
      transparent 30%
    ),
    rgba(255, 255, 255, 0.012);
}

.builder-blueprint__nodes {
  position: absolute;
  inset: 24px;
}

.scanner {
  margin-top: 64px;

  display: grid;
  gap: 34px;

  max-width: 900px;
}

.scanner-question {
  display: grid;
  gap: 16px;
}

.scanner-results {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 1px;

  margin-top: 10px;

  background: var(--line);
  border: 1px solid var(--line);
}

.engineering-process {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 1px;

  background: var(--line);
  border: 1px solid var(--line);
}

.security-grid {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 1px;

  background: var(--line);
  border: 1px solid var(--line);
}

.selected-grid {
  margin-top: 64px;

  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 1px;

  background: var(--line);
  border: 1px solid var(--line);
}

.company-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(320px, 0.65fr);

  gap: 100px;
  align-items: start;
}

.company-layout h2 {
  margin: 20px 0 0;

  max-width: 780px;

  font-family: var(--font-display);

  font-size:
    clamp(
      48px,
      5.5vw,
      86px
    );

  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.company-copy {
  display: grid;
  gap: 22px;
}

.project-configurator {
  margin-top: 64px;

  max-width: 980px;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}

.project-platforms,
.project-result,
.project-field:nth-last-of-type(2),
.project-field:nth-last-of-type(1),
.project-configurator > .button {
  grid-column: 1 / -1;
}

.final-section {
  min-height: 72vh;

  display: grid;
  place-items: center;

  text-align: center;
}

.final-section__inner {
  display: grid;
  justify-items: center;
}

.final-section h2 {
  margin: 20px 0 0;

  max-width: 980px;

  font-family: var(--font-display);

  font-size:
    clamp(
      56px,
      7vw,
      108px
    );

  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.final-section .button {
  margin-top: 36px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns:
    1fr
    auto
    1fr;

  gap: 40px;
  align-items: center;
}

.site-footer__inner > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-footer__inner nav {
  display: flex;
  gap: 24px;
}

.site-footer__system {
  justify-self: end;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.command-panel {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: grid;
  place-items: start center;

  padding-top: 14vh;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.command-panel.is-open {
  opacity: 1;
  visibility: visible;
}

.command-panel__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(0, 0, 0, 0.74);

  backdrop-filter:
    blur(12px);
}

.command-panel__dialog {
  position: relative;

  width:
    min(
      calc(100% - 40px),
      700px
    );

  border: 1px solid var(--line-strong);

  background:
    rgba(7, 9, 10, 0.98);

  box-shadow:
    var(--shadow-deep);
}

.command-panel__top {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border-bottom: 1px solid var(--line);
}

.command-panel__search {
  min-height: 64px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 18px;

  border-bottom: 1px solid var(--line);
}

.command-panel__items {
  padding: 10px;
}

@media (max-width: 1240px) {
  .header__inner {
    grid-template-columns:
      auto
      1fr
      auto;
  }

  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, 0.78fr);

    gap: 54px;
  }

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

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

@media (max-width: 1050px) {
  .desktop-nav,
  .command-trigger,
  .button--header {
    display: none;
  }

  .header__inner {
    grid-template-columns:
      1fr
      auto;
  }

  .hero__grid,
  .capability-environment,
  .global-environment,
  .builder-layout,
  .company-layout {
    grid-template-columns: 1fr;
  }

  .hero__visual-stage {
    width:
      min(
        100%,
        620px
      );
  }

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

  .genome__core {
    order: -1;
  }

  .chaos-control {
    grid-template-columns: 1fr;
  }

  .chaos-control__core {
    width: 220px;
    justify-self: center;
  }

  .event-engine {
    grid-template-columns: 1fr;
  }

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

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

  .command-demo__workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .command-demo__map {
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__inner nav {
    flex-wrap: wrap;
  }

  .site-footer__system {
    justify-self: start;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .section--hero {
    min-height: auto;

    padding-top:
      calc(
        var(--header-h)
        + 54px
      );
  }

  .hero__grid {
    gap: 56px;
  }

  .hero__lower {
    margin-top: 58px;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__visual-stage {
    width:
      min(
        100%,
        470px
      );
  }

  .industries-grid,
  .exception-engine,
  .engineering-process,
  .security-grid,
  .selected-grid,
  .scanner-results,
  .project-configurator {
    grid-template-columns: 1fr;
  }

  .industries-beyond {
    grid-template-columns: 1fr;
  }

  .builder-options {
    grid-template-columns: 1fr;
  }

  .world-map,
  .builder-blueprint,
  .capability-stage {
    min-height: 420px;
  }

  .command-demo__stats {
    grid-template-columns: 1fr;
  }

  .project-platforms,
  .project-result,
  .project-field:nth-last-of-type(2),
  .project-field:nth-last-of-type(1),
  .project-configurator > .button {
    grid-column: auto;
  }

  .site-footer__inner nav {
    display: grid;
    gap: 12px;
  }
}