.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
}

.brand__mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.14);

  border-radius:
    50%;

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

  font-size:
    22px;

  font-weight:
    600;

  line-height:
    1;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(103, 245, 154, 0.045),
      transparent 64%
    );

  box-shadow:
    inset 0 0 0 1px rgba(103, 245, 154, 0.03);
}

.brand__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand__name {
  font-family:
    var(--font-display);

  font-size:
    15px;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}

.brand__descriptor {
  color:
    var(--muted-soft);

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.desktop-nav a {
  position: relative;

  color:
    #c2c7c5;

  font-size:
    13px;

  font-weight:
    500;

  transition:
    color
    180ms
    ease;
}

.desktop-nav a::after {
  content: "";

  position:
    absolute;

  left:
    0;

  right:
    100%;

  bottom:
    -8px;

  height:
    1px;

  background:
    var(--accent);

  transition:
    right
    240ms
    var(--ease);
}

.desktop-nav a:hover {
  color:
    #fff;
}

.desktop-nav a:hover::after {
  right:
    0;
}

.button {
  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  padding:
    0 20px;

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

  border-radius:
    2px;

  background:
    transparent;

  font-size:
    13px;

  font-weight:
    600;

  letter-spacing:
    0.01em;

  cursor:
    pointer;

  transition:
    transform
    180ms
    var(--ease),
    border-color
    180ms
    ease,
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}

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

.button--primary {
  min-height:
    54px;

  padding:
    0 24px;

  background:
    var(--accent);

  border-color:
    var(--accent);

  color:
    #041008;
}

.button--primary:hover {
  background:
    var(--accent-strong);
}

.button--secondary {
  min-height:
    54px;

  background:
    rgba(255, 255, 255, 0.018);
}

.button--secondary:hover {
  border-color:
    rgba(255, 255, 255, 0.28);

  background:
    rgba(255, 255, 255, 0.04);
}

.button--header {
  min-height:
    42px;

  padding:
    0 16px;

  border-color:
    rgba(103, 245, 154, 0.22);

  color:
    #eef5f0;
}

.button--header:hover {
  border-color:
    rgba(103, 245, 154, 0.58);

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

.button--full {
  width:
    100%;
}

.button__arrow {
  font-size:
    16px;
}

.command-trigger {
  height:
    42px;

  min-width:
    52px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    0 10px;

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

  background:
    rgba(255, 255, 255, 0.02);

  cursor:
    pointer;

  transition:
    border-color
    180ms
    ease,
    background-color
    180ms
    ease;
}

.command-trigger:hover {
  border-color:
    var(--line-strong);

  background:
    rgba(255, 255, 255, 0.045);
}

.command-trigger__icon,
.command-trigger__label {
  color:
    var(--muted);

  font-size:
    11px;
}

.mobile-toggle {
  width:
    44px;

  height:
    44px;

  display:
    none;

  position:
    relative;

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

  background:
    transparent;

  cursor:
    pointer;
}

.mobile-toggle span {
  position:
    absolute;

  left:
    12px;

  width:
    18px;

  height:
    1px;

  background:
    #fff;

  transition:
    transform
    220ms
    var(--ease),
    top
    220ms
    var(--ease);
}

.mobile-toggle span:first-child {
  top:
    17px;
}

.mobile-toggle span:last-child {
  top:
    25px;
}

.mobile-toggle[aria-expanded="true"] span:first-child {
  top:
    21px;

  transform:
    rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] span:last-child {
  top:
    21px;

  transform:
    rotate(-45deg);
}

.mobile-menu {
  display:
    none;
}

.eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #aeb6b1;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.eyebrow__status {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 4px rgba(103, 245, 154, 0.06),
    0 0 18px rgba(103, 245, 154, 0.4);
}

.hero__title {
  max-width:
    800px;

  margin:
    24px
    0
    0;

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

  font-size:
    clamp(
      56px,
      5.6vw,
      94px
    );

  font-weight:
    500;

  line-height:
    0.96;

  letter-spacing:
    -0.055em;

  text-wrap:
    balance;
}

.hero__lead {
  max-width:
    680px;

  margin:
    28px
    0
    0;

  color:
    var(--muted);

  font-size:
    clamp(
      17px,
      1.25vw,
      20px
    );

  line-height:
    1.7;
}

.hero__meta {
  margin-top:
    30px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px
    18px;
}

.hero__meta span {
  position:
    relative;

  color:
    #c7cdca;

  font-size:
    12px;
}

.hero__meta span:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    -10px;

  width:
    2px;

  height:
    2px;

  border-radius:
    50%;

  background:
    var(--accent);

  opacity:
    0.65;
}

.hero__actions {
  margin-top:
    38px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;
}

.hero__trustline {
  margin-top:
    44px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    12px
    22px;

  color:
    #747d78;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.hero__trustline-label {
  color:
    #9aa39e;
}

.system-orbit {
  position:
    absolute;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.065);

  border-radius:
    50%;
}

.system-orbit--outer {
  width:
    88%;

  height:
    88%;
}

.system-orbit--middle {
  width:
    66%;

  height:
    66%;

  border-color:
    rgba(103, 245, 154, 0.11);
}

.system-orbit--inner {
  width:
    42%;

  height:
    42%;
}

.system-links {
  position:
    absolute;

  inset:
    8%;

  width:
    84%;

  height:
    84%;

  overflow:
    visible;
}

.system-links path {
  fill:
    none;

  stroke:
    rgba(103, 245, 154, 0.15);

  stroke-width:
    1;

  stroke-dasharray:
    5 9;
}

.system-core {
  position:
    relative;

  width:
    170px;

  aspect-ratio:
    1;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.13);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(103, 245, 154, 0.052),
      transparent 44%
    ),
    #07090a;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 12px rgba(255, 255, 255, 0.01);
}

.system-core__halo {
  position:
    absolute;

  inset:
    -25%;

  border:
    1px
    solid
    rgba(103, 245, 154, 0.12);

  border-radius:
    50%;

  opacity:
    0.5;
}

.system-core__ring {
  position:
    absolute;

  inset:
    14px;

  border:
    1px
    solid
    rgba(103, 245, 154, 0.17);

  border-radius:
    50%;
}

.system-core__mark {
  font-family:
    var(--font-display);

  font-size:
    72px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    -0.08em;
}

.system-core__caption {
  position:
    absolute;

  left:
    50%;

  bottom:
    -58px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  transform:
    translateX(-50%);

  white-space:
    nowrap;
}

.system-core__caption span {
  font-family:
    var(--font-display);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

.system-core__caption small {
  margin-top:
    3px;

  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    0.2em;
}

.system-node {
  position:
    absolute;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 10px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.07);

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

  backdrop-filter:
    blur(10px);
}

.system-node__dot {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 14px rgba(103, 245, 154, 0.45);
}

.system-node__label {
  color:
    #bcc3bf;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    0.18em;
}

.system-node--people {
  left:
    12%;

  top:
    19%;
}

.system-node--assets {
  left:
    7%;

  top:
    53%;
}

.system-node--data {
  left:
    29%;

  bottom:
    8%;
}

.system-node--operations {
  right:
    8%;

  top:
    24%;
}

.system-node--automation {
  right:
    4%;

  bottom:
    23%;
}

.signal {
  position:
    absolute;

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 5px rgba(103, 245, 154, 0.06),
    0 0 26px rgba(103, 245, 154, 0.54);
}

.signal--one {
  left:
    27%;

  top:
    30%;
}

.signal--two {
  right:
    24%;

  bottom:
    29%;
}

.visual-caption {
  position:
    absolute;

  right:
    1%;

  bottom:
    1%;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--muted-soft);

  font-size:
    9px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.visual-caption__index {
  color:
    var(--accent);
}

.telemetry {
  width:
    min(
      540px,
      100%
    );

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

  padding-top:
    14px;
}

.telemetry__heading {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    var(--muted-soft);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.telemetry__online {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #aab2ad;
}

.telemetry__online-dot {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--accent);
}

.telemetry__grid {
  margin-top:
    16px;

  display:
    grid;

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

  gap:
    22px;
}

.telemetry__grid > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.telemetry__key {
  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    0.15em;
}

.telemetry strong {
  color:
    #cfd4d1;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.08em;
}

.scroll-cue {
  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    10px;

  color:
    var(--muted-soft);

  font-size:
    9px;

  letter-spacing:
    0.15em;
}

.scroll-cue__line {
  width:
    80px;

  height:
    1px;

  position:
    relative;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, 0.08);
}

.scroll-cue__line::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  width:
    34%;

  background:
    var(--accent);
}


/* =====================================================
   SYSTEM GENOME
===================================================== */

.genome-node {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 16px;

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

  background:
    rgba(255, 255, 255, 0.015);

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  cursor:
    pointer;

  transition:
    border-color
    180ms
    ease,
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}

.genome-node:hover,
.genome-node.is-active {
  border-color:
    var(--accent-line);

  background:
    var(--accent-soft);

  color:
    #fff;
}

.genome__outputs span {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 16px;

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

  color:
    #b7beb9;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.12em;
}

.genome-detail__label {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.18em;
}

.genome-detail h3 {
  margin:
    10px
    0
    0;

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

  font-size:
    28px;

  font-weight:
    600;
}

.genome-detail p {
  max-width:
    720px;

  margin:
    12px
    0
    0;

  color:
    var(--muted);

  line-height:
    1.7;
}


/* =====================================================
   CAPABILITIES
===================================================== */

.capability-item {
  min-height:
    64px;

  display:
    grid;

  grid-template-columns:
    42px 1fr;

  align-items:
    center;

  padding:
    0 16px;

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

  background:
    transparent;

  color:
    var(--text-soft);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color
    180ms
    ease,
    background-color
    180ms
    ease;
}

.capability-item span {
  color:
    var(--muted-soft);

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.capability-item strong {
  font-size:
    14px;

  font-weight:
    500;
}

.capability-item:hover,
.capability-item.is-active {
  color:
    #fff;

  background:
    rgba(255, 255, 255, 0.025);
}

.capability-item.is-active {
  box-shadow:
    inset 2px 0 0 var(--accent);
}

.capability-object {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    scale(0.96)
    translateY(12px);

  transition:
    opacity
    320ms
    var(--ease),
    transform
    320ms
    var(--ease),
    visibility
    320ms
    ease;
}

.capability-object.is-active {
  opacity:
    1;

  visibility:
    visible;

  transform:
    scale(1)
    translateY(0);
}

.device-phone {
  width:
    min(
      250px,
      60%
    );

  aspect-ratio:
    0.49;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  padding:
    10px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.22);

  border-radius:
    36px;

  background:
    linear-gradient(
      145deg,
      #15191a,
      #050607 60%
    );

  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  transform:
    rotateY(-12deg)
    rotateX(5deg)
    rotateZ(2deg);
}

.device-phone::before {
  content:
    "";

  position:
    absolute;

  top:
    9px;

  width:
    72px;

  height:
    18px;

  border-radius:
    12px;

  background:
    #020303;

  z-index:
    2;
}

.device-phone__screen {
  width:
    100%;

  height:
    100%;

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    28px;

  padding:
    72px 22px 24px;

  background:
    radial-gradient(
      circle at 70% 18%,
      rgba(103, 245, 154, 0.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #0d1110,
      #060808
    );
}

.device-phone__screen > span {
  color:
    var(--accent);

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.device-phone__screen > strong {
  display:
    block;

  margin-top:
    10px;

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

  font-size:
    22px;

  line-height:
    1.05;
}

.mini-ui {
  margin-top:
    28px;

  display:
    grid;

  gap:
    9px;
}

.mini-ui span {
  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 12px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.07);

  background:
    rgba(255, 255, 255, 0.025);

  color:
    #cbd1cd;

  font-size:
    9px;

  letter-spacing:
    0.1em;
}

.demo-monitor {
  width:
    min(
      560px,
      78%
    );

  aspect-ratio:
    16 / 10;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.028),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42);

  transform:
    rotateY(8deg)
    rotateX(4deg);
}

.demo-monitor::after {
  content:
    "";

  position:
    absolute;

  width:
    90px;

  height:
    44px;

  bottom:
    -44px;

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

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

.demo-monitor span,
.demo-vehicle span,
.demo-network span,
.demo-integration span,
.demo-analytics span,
.demo-document span,
.demo-security span {
  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.demo-vehicle {
  width:
    min(
      500px,
      74%
    );

  height:
    220px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    120px 90px 50px 50px;

  background:
    linear-gradient(
      145deg,
      rgba(103, 245, 154, 0.035),
      rgba(255, 255, 255, 0.01)
    );

  transform:
    rotateY(-12deg);
}

.demo-vehicle::before,
.demo-vehicle::after {
  content:
    "";

  position:
    absolute;

  bottom:
    -34px;

  width:
    66px;

  height:
    66px;

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

  border-radius:
    50%;

  background:
    #07090a;
}

.demo-vehicle::before {
  left:
    80px;
}

.demo-vehicle::after {
  right:
    80px;
}

.demo-network,
.demo-integration,
.demo-analytics,
.demo-document,
.demo-security {
  width:
    min(
      520px,
      76%
    );

  aspect-ratio:
    1.35;

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

.demo-network::before,
.demo-integration::before,
.demo-analytics::before,
.demo-document::before,
.demo-security::before {
  content:
    "";

  position:
    absolute;

  inset:
    16%;

  border:
    1px
    dashed
    rgba(103, 245, 154, 0.2);
}

.demo-security {
  border-color:
    rgba(255, 255, 255, 0.13);

  box-shadow:
    inset 0 0 0 18px rgba(255, 255, 255, 0.01),
    inset 0 0 0 42px rgba(103, 245, 154, 0.012);
}


/* =====================================================
   X-RAY / TRANSFORMATION
===================================================== */

.xray-stack > div {
  color:
    #cbd1cd;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.14em;

  transition:
    transform
    200ms
    var(--ease),
    border-color
    200ms
    ease,
    background-color
    200ms
    ease;
}

.xray-stack > div:hover {
  transform:
    translateX(10px);

  border-color:
    var(--accent-line);

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

.chaos-control__before span,
.chaos-control__after span {
  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 16px;

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

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.11em;
}

.chaos-control__before span {
  color:
    #8f9692;

  background:
    rgba(255, 255, 255, 0.012);
}

.chaos-control__after span {
  color:
    #d3d8d5;

  border-color:
    rgba(103, 245, 154, 0.15);

  background:
    rgba(103, 245, 154, 0.025);
}


/* =====================================================
   EVENT ENGINE
===================================================== */

.event-engine__trigger,
.event-engine__result {
  min-height:
    250px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    28px;

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

  background:
    rgba(255, 255, 255, 0.014);
}

.event-engine__trigger span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.event-engine__trigger strong {
  margin-top:
    12px;

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

  font-size:
    26px;

  line-height:
    1.08;
}

.event-engine__steps span {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 14px;

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

  color:
    #bcc3bf;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.11em;
}

.event-engine__steps span::after {
  content:
    "✓";

  margin-left:
    auto;

  color:
    var(--accent);
}

.event-engine__result {
  align-items:
    center;

  border-color:
    var(--accent-line);

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}


/* =====================================================
   EXCEPTIONS
===================================================== */

.exception-engine strong {
  font-family:
    var(--font-display);

  font-size:
    42px;

  font-weight:
    500;

  letter-spacing:
    -0.04em;
}

.exception-engine span {
  margin-top:
    8px;

  color:
    var(--muted-soft);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.14em;
}

.exception-engine__critical {
  background:
    linear-gradient(
      180deg,
      rgba(103, 245, 154, 0.035),
      rgba(255, 255, 255, 0.012)
    ) !important;
}

.exception-engine__critical strong,
.exception-engine__critical span {
  color:
    var(--accent);
}


/* =====================================================
   COMMAND CENTER
===================================================== */

.command-demo__header {
  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.14em;
}

.command-demo__header span:last-child {
  color:
    var(--accent);
}

.command-demo__stats > div {
  min-height:
    110px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  padding:
    18px;

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

.command-demo__stats > div:last-child {
  border-right:
    0;
}

.command-demo__stats span {
  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    0.14em;
}

.command-demo__stats strong {
  margin-top:
    8px;

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

  font-size:
    28px;

  font-weight:
    600;
}

.command-demo__map,
.command-demo__feed,
.command-demo__exceptions {
  color:
    var(--muted-soft);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.13em;

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


/* =====================================================
   INDUSTRIES
===================================================== */

.industry-card {
  min-height:
    260px;

  padding:
    26px;

  background:
    var(--bg-soft);

  transition:
    background-color
    200ms
    ease,
    transform
    200ms
    var(--ease);
}

.industry-card:hover {
  background:
    rgba(255, 255, 255, 0.026);

  transform:
    translateY(-3px);
}

.industry-card > span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.industry-card h3 {
  margin:
    54px
    0
    0;

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

  font-size:
    25px;

  font-weight:
    600;

  line-height:
    1.1;
}

.industry-card p {
  margin:
    18px
    0
    0;

  color:
    var(--muted);

  line-height:
    1.7;
}

.industries-beyond > span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.industries-beyond p {
  max-width:
    780px;

  margin:
    0;

  color:
    var(--muted);

  line-height:
    1.75;
}


/* =====================================================
   GLOBAL
===================================================== */

.world-map__placeholder {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    rgba(255, 255, 255, 0.12);

  font-size:
    clamp(
      32px,
      6vw,
      88px
    );

  font-weight:
    600;

  letter-spacing:
    0.08em;
}

.world-map::before {
  content:
    "";

  position:
    absolute;

  inset:
    8%;

  opacity:
    0.28;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    );

  background-size:
    18px 18px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      transparent 72%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      transparent 72%
    );
}

.visitor-node {
  position:
    absolute;

  left:
    38%;

  top:
    63%;

  width:
    18px;

  height:
    18px;

  display:
    grid;

  place-items:
    center;
}

.visitor-node span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 18px rgba(103, 245, 154, 0.6);
}

.visitor-node::before {
  content:
    "";

  position:
    absolute;

  width:
    38px;

  height:
    38px;

  border:
    1px
    solid
    rgba(103, 245, 154, 0.24);

  border-radius:
    50%;
}

.global-session > span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.global-session > strong {
  margin-top:
    12px;

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

  font-size:
    34px;

  font-weight:
    600;

  line-height:
    1.05;
}

.global-session > small {
  margin-top:
    8px;

  color:
    var(--muted-soft);

  letter-spacing:
    0.08em;
}

.global-session__meta > div {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    13px
    0;

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

.global-session__meta span {
  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    0.14em;
}

.global-session__meta strong {
  color:
    #cbd1cd;

  font-size:
    10px;

  letter-spacing:
    0.08em;
}


/* =====================================================
   BUILDER
===================================================== */

.builder-options button {
  min-height:
    52px;

  padding:
    0 14px;

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

  background:
    rgba(255, 255, 255, 0.012);

  color:
    var(--text-soft);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease,
    border-color
    180ms
    ease,
    color
    180ms
    ease;
}

.builder-options button:hover,
.builder-options button.is-active {
  border-color:
    var(--accent-line);

  background:
    var(--accent-soft);

  color:
    #fff;
}

.builder-blueprint > span {
  position:
    absolute;

  top:
    24px;

  left:
    24px;

  color:
    var(--muted-soft);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.14em;
}

.builder-blueprint > strong {
  width:
    160px;

  aspect-ratio:
    1;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

  background:
    var(--bg);

  color:
    var(--text);

  font-size:
    11px;

  letter-spacing:
    0.12em;

  z-index:
    2;
}

.builder-node {
  position:
    absolute;

  min-width:
    120px;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 12px;

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

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

  color:
    #c4cbc6;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    0.12em;
}


/* =====================================================
   SCANNER
===================================================== */

.scanner-question label {
  color:
    var(--text-soft);

  font-size:
    14px;

  font-weight:
    500;
}

.scanner-question input[type="range"] {
  width:
    100%;

  accent-color:
    var(--accent);
}

.scanner-results > div {
  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  padding:
    20px;

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

.scanner-results span {
  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    0.13em;
}

.scanner-results strong {
  margin-top:
    8px;

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

  font-size:
    34px;

  font-weight:
    600;
}


/* =====================================================
   ENGINEERING / SECURITY / SELECTED
===================================================== */

.engineering-process > div,
.security-grid > span,
.selected-grid > article {
  min-height:
    180px;

  padding:
    22px;

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

.engineering-process > div {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;
}

.engineering-process span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.engineering-process strong {
  font-family:
    var(--font-display);

  font-size:
    21px;

  line-height:
    1.15;
}

.security-grid > span {
  display:
    flex;

  align-items:
    flex-end;

  color:
    #bfc6c1;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.13em;
}

.selected-grid > article {
  transition:
    background-color
    180ms
    ease;
}

.selected-grid > article:hover {
  background:
    rgba(255, 255, 255, 0.026);
}

.selected-grid span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.15em;
}

.selected-grid h3 {
  margin:
    62px
    0
    0;

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

  font-size:
    22px;

  font-weight:
    600;

  line-height:
    1.12;
}


/* =====================================================
   COMPANY
===================================================== */

.company-copy p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    17px;

  line-height:
    1.78;
}


/* =====================================================
   PROJECT
===================================================== */

.project-field {
  display:
    grid;

  gap:
    10px;
}

.project-field label,
.project-platforms legend {
  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.project-field input,
.project-field select,
.project-field textarea {
  width:
    100%;

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

  border-radius:
    0;

  outline:
    0;

  background:
    rgba(255, 255, 255, 0.016);

  color:
    var(--text);

  transition:
    border-color
    180ms
    ease,
    background-color
    180ms
    ease;
}

.project-field input,
.project-field select {
  min-height:
    54px;

  padding:
    0 14px;
}

.project-field textarea {
  padding:
    14px;

  line-height:
    1.6;
}

.project-field input:focus,
.project-field select:focus,
.project-field textarea:focus {
  border-color:
    var(--accent-line);

  background:
    rgba(103, 245, 154, 0.02);
}

.project-platforms {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  padding:
    18px 0 0;

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

.project-platforms legend {
  width:
    100%;

  margin-bottom:
    6px;
}

.project-platforms label {
  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0 12px;

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

  color:
    var(--text-soft);

  cursor:
    pointer;
}

.project-platforms input {
  accent-color:
    var(--accent);
}

.project-result {
  padding:
    24px;

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

  background:
    rgba(103, 245, 154, 0.025);
}

.project-result > span {
  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.16em;
}

.project-result > strong {
  display:
    block;

  margin-top:
    10px;

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

  font-size:
    32px;

  letter-spacing:
    0.04em;
}

.project-result p {
  margin:
    12px
    0
    0;

  color:
    var(--muted);
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer strong {
  font-family:
    var(--font-display);

  font-size:
    15px;
}

.site-footer span,
.site-footer a {
  color:
    var(--muted-soft);

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.site-footer a:hover {
  color:
    #fff;
}

.site-footer__system strong {
  color:
    var(--accent);

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

  font-size:
    9px;

  letter-spacing:
    0.12em;
}


/* =====================================================
   COMMAND PALETTE
===================================================== */

.command-panel__top {
  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.15em;
}

.command-panel__top button {
  background:
    transparent;

  color:
    var(--muted-soft);

  font-size:
    9px;

  cursor:
    pointer;
}

.command-panel__search > span {
  color:
    var(--accent);
}

.command-panel__search input {
  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #fff;

  font-size:
    14px;
}

.command-panel__search input::placeholder {
  color:
    #646b68;
}

.command-panel__items a {
  min-height:
    54px;

  display:
    grid;

  grid-template-columns:
    42px 1fr;

  align-items:
    center;

  padding:
    0 12px;

  border:
    1px
    solid
    transparent;
}

.command-panel__items a:hover,
.command-panel__items a.is-filter-match {
  border-color:
    var(--line);

  background:
    rgba(255, 255, 255, 0.025);
}

.command-panel__items a.is-filter-hidden {
  display:
    none;
}

.command-panel__items span {
  color:
    var(--muted-soft);

  font-size:
    9px;
}

.command-panel__items strong {
  font-size:
    13px;

  font-weight:
    500;
}


@media (max-width: 1050px) {
  .mobile-toggle {
    display:
      inline-block;
  }

  .mobile-menu {
    position:
      fixed;

    inset:
      var(--header-h)
      0
      auto
      0;

    display:
      block;

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

    background:
      rgba(6, 8, 9, 0.97);

    backdrop-filter:
      blur(18px);

    transform:
      translateY(-120%);

    opacity:
      0;

    visibility:
      hidden;

    transition:
      transform
      300ms
      var(--ease),
      opacity
      220ms
      ease,
      visibility
      220ms
      ease;
  }

  .mobile-menu.is-open {
    transform:
      translateY(0);

    opacity:
      1;

    visibility:
      visible;
  }

  .mobile-menu__inner {
    display:
      flex;

    flex-direction:
      column;

    gap:
      0;

    padding-top:
      16px;

    padding-bottom:
      22px;
  }

  .mobile-menu__inner > a:not(.button) {
    min-height:
      52px;

    display:
      flex;

    align-items:
      center;

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

    color:
      #d6dbd8;

    font-size:
      14px;
  }

  .mobile-menu .button {
    margin-top:
      18px;
  }
}

@media (max-width: 720px) {
  .brand__descriptor {
    display:
      none;
  }

  .brand__mark {
    width:
      34px;

    height:
      34px;

    font-size:
      19px;
  }

  .hero__title {
    margin-top:
      20px;

    font-size:
      clamp(
        46px,
        13vw,
        66px
      );

    line-height:
      0.98;
  }

  .hero__lead {
    margin-top:
      22px;

    font-size:
      16px;

    line-height:
      1.65;
  }

  .hero__actions {
    margin-top:
      30px;

    flex-direction:
      column;
  }

  .hero__actions .button {
    width:
      100%;
  }

  .hero__trustline {
    margin-top:
      32px;

    gap:
      9px
      15px;

    font-size:
      9px;
  }

  .system-core {
    width:
      122px;
  }

  .system-core__mark {
    font-size:
      52px;
  }

  .system-node {
    padding:
      6px
      8px;
  }

  .system-node__label {
    font-size:
      7px;
  }

  .visual-caption {
    display:
      none;
  }

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

  .telemetry__grid > div:last-child {
    display:
      none;
  }

  .scroll-cue {
    align-items:
      flex-start;
  }

  .device-phone {
    width:
      min(
        220px,
        68%
      );
  }

  .industry-card {
    min-height:
      220px;
  }

  .industry-card h3 {
    margin-top:
      42px;
  }
}